WEB前端开发学习----9. 使用canvas来画个时钟
canvas元素在html5中的重要性非同一般。配合JS让我们实现了在浏览器页面中作画的强大功能。不再单单依靠图片,flash等外部文件,减少http请求,从而网页加载速度更加快捷。
简单的线段:
看个小演示canvas小房子
不用函数累死人。。。。
旋转:
使用提供的rotate()方法。需要注意的是,在旋转前,应该重新定位原点。一般来说将要旋转的图像的端点重定向为原点,以此为基础来旋转。也就是说先定位,再设置旋转角度,最后画图。看个演示canvas 扇子。这样要比一道一道的画线方便许多。
用渐变色填充图像:
分为径向渐变和线性渐变,有点类似于CSS3的渐变操作。不需要再用图片来做渐变背景了。
看个演示 canvas 立体小球。
用这些方法就可以做一个时钟了,纯canvas+js,不使用图片。
查看效果 canvas时钟
完整的代码:
[html]view plain copy
时钟 - 锐客网 - var can=document.getElementById("canvas");
- var cxt=can.getContext("2d");
- function drawClock(){
- //清楚画布
- cxt.clearRect(0, 0, 500, 500);
- //得到当前时间
- var time=new Date();
- var hours=time.getHours();
- var mins=time.getMinutes();
- var secs=time.getSeconds();
- //转换为12进制
- hours=hours>12?hours-12:hours;
- //小时必须获得浮点型,不能只显示整点
- hours=hours+mins/60;
- //先画出表盘
- cxt.lineWidth=10;
- cxt.strokeStyle="blue";
- cxt.beginPath();
- cxt.arc(250, 250, 200, 0, 360, false);
- cxt.closePath();
- cxt.stroke();
- //画出时刻
- for(var i=0; i<12; i++){
- cxt.save();
- cxt.beginPath();
- cxt.lineWidth=7;
- cxt.strokeStyle="black";
- //按照圆心来旋转,好计算
- cxt.translate(250, 250);
- cxt.rotate(i*30*Math.PI/180);
- cxt.beginPath();
- cxt.moveTo(0, -170);
- cxt.lineTo(0, -190);
- cxt.closePath();
- cxt.stroke();
- cxt.restore();
- }
- for(var i=0; i<60; i++){
- cxt.save();
- cxt.beginPath();
- cxt.lineWidth=5;
- cxt.strokeStyle="black";
- //按照圆心来旋转,好计算
- cxt.translate(250, 250);
- cxt.rotate(i*6*Math.PI/180);
- cxt.beginPath();
- cxt.moveTo(0, -180);
- cxt.lineTo(0, -190);
- cxt.closePath();
- cxt.stroke();
- cxt.restore();
- }
- //画出时针
- cxt.save();
- cxt.lineWidth=7;
- cxt.strokeStyle="black";
- cxt.translate(250, 250);
- cxt.rotate(hours*30*Math.PI/180);
- cxt.beginPath();
- cxt.moveTo(0, 15);
- cxt.lineTo(0, -130);
- cxt.closePath();
- cxt.stroke();
- cxt.restore();
- //分针
- cxt.save();
- cxt.lineWidth=5;
- cxt.strokeStyle="black";
- cxt.translate(250, 250);
- cxt.rotate(mins*6*Math.PI/180);
- cxt.beginPath();
- cxt.moveTo(0, 15);
- cxt.lineTo(0, -150);
- cxt.closePath();
- cxt.stroke();
- cxt.restore();
- //秒针
- cxt.save();
- cxt.lineWidth=3;
- cxt.strokeStyle="red";
- cxt.translate(250, 250);
- cxt.rotate(secs*6*Math.PI/180);
- cxt.beginPath();
- cxt.moveTo(0, 15);
- cxt.lineTo(0, -172);
- cxt.closePath();
- cxt.stroke();
- //美化 画出中间的小圆点
- cxt.beginPath();
- cxt.arc(0, 0, 6, 0, 360, false);
- cxt.closePath();
- cxt.fillStyle="black";
- cxt.fill();
- cxt.stroke();
- //画出秒针前段的小圆点
- cxt.beginPath();
- cxt.arc(0, -150, 8, 0, 360, false);
- cxt.closePath();
- cxt.fillStyle="black";
- cxt.fill();
- cxt.stroke();
- cxt.restore();
- }
- //为了避免打开后等待1秒才画图,先调用一次
- drawClock();
- setInterval(drawClock,1000);
推荐阅读
- 深入理解Go之generate
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 私有化轻量级持续集成部署方案--03-部署web服务(下)
- Jsr303做前端数据校验
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 我的软件测试开发工程师书单
- spring|spring boot项目启动websocket
- echart|echart 双轴图开发
- NPDP拆书(三)(新产品开发战略(经营与创新战略))
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件