|
1.canvas原理
双缓冲画布,用户看到的是一个画布,我们操作的是内存中的画布,旋转是以左上角(0,0,)为原点. 2.使用方法\样式 颜色: fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔触的颜色、渐变或模式 矩形: rect() 创建矩形 fillRect() 绘制“被填充”的矩形 strokeRect() 绘制矩形（无填充） clearRect() 在给定的矩形内清除指定的像素 线条: lineCap 设置或返回线条的结束端点样式 lineJoin 设置或返回两条线相交时，所创建的拐角类型 lineWidth 设置或返回当前的线条宽度 miterLimit 设置或返回最大斜接长度 路径: fill() 填充当前绘图（路径） stroke() 绘制已定义的路径 beginPath() 起始一条路径，或重置当前路径 moveTo() 把路径移动到画布中的指定点，不创建线条 closePath() 创建从当前点回到起始点的路径 lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条 arc() 创建弧/曲线（用于创建圆形或部分圆） 转换: scale() 缩放当前绘图至更大或更小 rotate() 旋转当前绘图 translate() 重新映射画布上的 (0,0) 位置 transform() 替换绘图的当前转换矩阵 等等 今天为大家分享的是利用canvas的绘图的属性画的一个时钟 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas时钟</title> </head> <body> <canvas width="500" height="500" style="background:#f1b0b7 ; margin:50px auto; display:block; " id="clock"> </canvas> <script> var clock = document.getElementById("clock"); var context = clock.getContext('2d'); function drawClock() { context.clearRect(0, 0, 500, 500); var now = new Date(); //获取 var minute = now.getMinutes(); //获取分 var sec = now.getSeconds(); //获取秒 var hour = now.getHours(); //获取小时 hour = hour + minute / 60; hour = hour > 12 ? hour - 12 : hour; //转换成12小时制 context.beginPath(); //开始绘制 context.lineWidth = 4; context.strokeStyle = "black"; //表盘的颜色 context.arc(250, 250, 200, 0, 360, false);// 绘制圆形，坐标250,250 半径200,圆形360度 context.stroke(); //绘图 context.closePath();// 结束画布 //设置时针的样式 for (var i = 0; i < 12; i++) { context.save(); context.lineWidth = 7; context.strokeStyle = "black"; context.translate(250, 250); context.rotate(i * 30 * Math.PI / 180); context.beginPath(); context.moveTo(0, -180);// 从坐标0，-180开始 context.lineTo(0, -200);//到坐标0，-200结束 context.stroke(); //绘图 context.closePath(); context.restore(); } // for (var i = 0; i < 60; i++) { //这是分钟的刻度,我认为不是特好看,所以注释了,需要可以添加上 // context.save(); // context.lineWidth = 3; // context.strokeStyle = "#000"; // context.translate(250, 250); // context.rotate(i * 6 * Math.PI / 180); // context.beginPath(); // context.moveTo(0, -180); // context.lineTo(0, -190); // context.stroke(); // context.closePath(); // context.restore(); // // } for (var i = 0; i < 60; i++) { //时针 context.save(); context.lineWidth = 7; context.strokeStyle = "#000"; context.translate(250, 250); context.rotate(hour * 30 * Math.PI / 180); context.beginPath(); context.moveTo(0, -140); context.lineTo(0, 10); context.stroke(); context.closePath(); context.restore(); } context.save(); context.lineWidth = 5; context.strokeStyle = "#000"; context.translate(250, 250); context.rotate(minute * 6 * Math.PI / 180); context.beginPath(); context.moveTo(0, -160); context.lineTo(0, 15); context.stroke(); context.closePath(); context.restore(); context.save(); context.lineWidth = 3; //秒钟 context.strokeStyle = "#f00"; context.translate(250, 250); context.rotate(sec * 6 * Math.PI / 180); context.beginPath(); context.moveTo(0, -185); context.lineTo(0, 20); context.stroke(); context.closePath(); context.beginPath(); context.strokeStyle = "#f00"; context.arc(0, 0, 5, 0, 360, false); context.fillStyle = "#fff"; context.fill(); context.closePath(); context.beginPath(); context.strokeStyle = "#f00"; context.arc(0, -160, 5, 0, 360, false); context.fill(); context.stroke(); context.closePath(); context.restore(); } setInterval(drawClock,1000); //执行 </script> </body> </html> |
|
最新喜欢： huangt...
|
公众号
