使用HTML5的canvas做一个会动的时钟
这次我们的目标是画一个会和时间同步的时钟，不过没有美学感觉，样子丑的厉害。
HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。
我们做所有的画之情需要一个画布，html的canvas标签就是帮我们声明了一个画布。
- <canvas id="mycanvas">
- </canvas>
首先要实例化这个画布
- $(
- 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，负数值将会被忽略
- }
- );
接下来，就是我们利用这个画笔来学习怎么画了
各种线
- $(
- 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
- }
- );
相关推荐
nercon 2020-03-06
zsh 2020-03-01
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15