| 使用HTML5的canvas做一个会动的时钟 | 您所在的位置：网站首页 › 关于传统节日的手抄报简单又漂亮彩铅画 › 使用HTML5的canvas做一个会动的时钟 |
使用HTML5的canvas做一个会动的时钟
|
这次我们的目标是画一个会和时间同步的时钟，不过没有美学感觉，样子丑的厉害。
HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。 我们做所有的画之情需要一个画布，html的canvas标签就是帮我们声明了一个画布。 这个默认的画布的大小是300*150，接下来的工作大多就是JavaScript来做了。首先要实例化这个画布 $( function() { var canvas = document.getElementById("mycanvas"); $.log(canvas.width); $.log(canvas.height); var context = canvas.getContext("2d"); $.log(context.canvas); $.log(context.fillStyle); //要填充的区域的颜色 $.log(context.strokeStyle); //要绘制的线条的颜色 $.log(context.lineCap); //笔帽样式 $.log(context.lineJoin); //两条连续线段的连接样式 $.log(context.lineWidth); //线段的宽度 $.log(context.miterLimit); //斜联接 $.log(context.shadowColor); //阴影的颜色，默认为#000000， $.log(context.shadowOffsetX); //阴影在x方向上的偏移量，默认为0，不受坐标转换的影响。 $.log(context.shadowOffsetY); //阴影在y方向上的偏移量，默认为0，不受坐标转换的影响。 $.log(context.shadowBlur); //阴影的模糊度，默认为0，负数值将会被忽略 } ); 上面的结果你可以得到一个大致的想法，就是content可以认为是我们将来作画用的画笔（估计有专业人士对强烈抗议，我直接忽略），canvas就是我们的画布。我们现在的画笔是2D的画笔，换句话说就是画平面几何的画笔。接下来，就是我们利用这个画笔来学习怎么画了 各种线 $( function() { var canvas = document.getElementById("mycanvas"); var context = canvas.getContext("2d"); context.strokeStyle = "rgb(255, 0, 0)"; context.beginPath(); context.lineCap = "butt"; //默认 context.lineWidth = 10; context.moveTo(10, 10); context.lineTo(100, 10); //简单的一条线 context.stroke(); //该方法真正在画布上绘制该线段 context.beginPath(); context.lineCap = "round"; //圆形线头 context.moveTo(10, 30); context.lineTo(100, 30); context.stroke(); //该方法真正在画布上绘制该线段 context.beginPath(); context.lineCap = "square"; //方形线头 context.moveTo(10, 50); context.lineTo(100, 50); context.stroke(); //该方法真正在画布上绘制该线段 } ); 各种阴影 $( function() { var canvas = document.getElementById("mycanvas"); var context = canvas.getContext("2d"); context.strokeStyle = "rgb(255, 0, 0)"; context.lineWidth = 10; context.shadowColor = "#0000FF"; context.beginPath(); context.lineCap = "round"; context.moveTo(10, 10); context.lineTo(100, 10); context.shadowOffsetX = 10; context.shadowBlur = 10; context.stroke(); context.beginPath(); context.lineCap = "round"; context.moveTo(10, 30); context.lineTo(100, 30); context.shadowOffsetY = 10; context.shadowBlur = 10; context.stroke(); } ); 各种线∠连接 $( function() { var canvas = document.getElementById("mycanvas"); var context = canvas.getContext("2d"); context.strokeStyle = "rgb(255, 0, 0)"; context.lineWidth = 10; context.shadowColor = "#0000FF"; context.beginPath(); context.lineJoin = "miter"; //两条线段的外边缘一直扩展到它们相交 context.moveTo(10, 70); context.lineTo(50, 10); context.lineTo(80, 70); context.stroke(); context.lineJoin = "bevel"; //以一个斜边进行连接 context.moveTo(100, 70); context.lineTo(140, 10); context.lineTo(180, 70); context.stroke(); context.lineJoin = "round"; //:以一个圆弧边进行连接 context.beginPath(); context.moveTo(200, 70); context.lineTo(240, 10); context.lineTo(280, 70); context.stroke(); context.closePath(); //关闭path } );
|
【本文地址】
公司简介
联系我们