使用HTML5的canvas做一个会动的时钟

这次我们的目标是画一个会和时间同步的时钟，不过没有美学感觉，样子丑的厉害。

HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。

我们做所有的画之情需要一个画布，html的canvas标签就是帮我们声明了一个画布。

[javascript] view plaincopy
<canvas id="mycanvas">
</canvas>

这个默认的画布的大小是300*150，接下来的工作大多就是javaScript来做了。
首先要实例化这个画布

[javascript] view plaincopy
$(
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的画笔，换句话说就是画平面几何的画笔。
接下来，就是我们利用这个画笔来学习怎么画了

各种线

[javascript] view plaincopy
$(
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(); //该方法真正在画布上绘制该线段
}
);
各种阴影
[javascript] view plaincopy
$(
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();
}
);
各种线∠连接
[javascript] view plaincopy
$(
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
}
);
mitre的限定
[javascript] view plaincopy
$(
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.miterLimit = 1; //miterLimit 属性为斜面的长度设置一个上限。
//只对线条使用设置为 "miter" 的 lineJoin 属性绘制并且两条线段以锐角相交的时候有效
context.lineJoin = "miter"; //两条线段的外边缘一直扩展到它们相交
context.moveTo(10, 70);
context.lineTo(50, 10);
context.lineTo(80, 70);
context.stroke();
}
);
各种几何图形
[javascript] view plaincopy
$(
function() {
var canvas = document.getElementById("mycanvas");
canvas.height = 500; //改变默认高度
canvas.width = 500;
var context = canvas.getContext("2d");
context.strokeStyle = "rgb(255, 0, 0)";
context.fillStyle = "#AABBCC";
context.lineWidth = 2;
context.shadowColor = "#0000FF";
//矩形
context.beginPath();
context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height
context.strokeRect(70, 10, 50, 50)//空心矩形:x,y,width,height
//context.move(10,100);
//圆弧:x, y, radius, startAngle, endAngle, anticlockwise
context.beginPath();
context.arc(35, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.stroke();
//context.closePath();
context.beginPath();
context.arc(85, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 180, false);
context.stroke();
//context.closePath();
context.beginPath();
context.arc(135, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 180, true);
context.stroke();
//context.closePath();
context.beginPath();
context.arc(185, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 360, true);
context.stroke();
//context.closePath();
context.beginPath();
context.arc(235, 110, 25, (Math.PI / 180) * 90, (Math.PI / 180) * 0, false);
context.fillStyle = "blue";
context.fill();
//context.stroke();
//context.closePath();
context.beginPath();
context.arc(285, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 45, false);
context.closePath();
context.stroke();
context.beginPath();
context.arc(335, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 45, false);
context.closePath();
context.fillStyle = "blue";
context.fill();
context.stroke();
//曲线
context.beginPath();
context.moveTo(10, 160); //二次贝塞尔曲线的起始点
//controlX, controlY, endX, endY
context.quadraticCurveTo(70, 280, 235, 140);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(10, 300); //三次贝塞尔曲线的起始点
//controlX1, controlY1, controlX2, controlY2, endX, endY
context.bezierCurveTo(70, 280, 50, 400, 235, 190);
context.stroke();
context.closePath();
}
);
各种变换
记得CSS3中的transform不？canvas肯定也有啊
平移
[javascript] view plaincopy
$(
function() {
var canvas = document.getElementById("mycanvas");
canvas.height = 500; //改变默认高度
canvas.width = 500;
var context = canvas.getContext("2d");
context.strokeStyle = "rgb(255, 0, 0)";
context.fillStyle = "#AABBCC";
context.lineWidth = 2;
context.shadowColor = "#0000FF";
context.moveTo(10, 10);
//context.beginPath();
//context.beginPath();
context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height
//context.stroke();
$(canvas).on(
"click",
{ "context": context },
function(e) {
$.log(e.data.context);
var ctx = e.data.context;
ctx.translate(10, 10); //再最后的路径点上偏移10*10的位置
context.fillRect(10, 10, 50, 50);
context.stroke();
}
);
}
);
缩放
[javascript] view plaincopy
$(
function() {
var canvas = document.getElementById("mycanvas");
canvas.height = 500; //改变默认高度
canvas.width = 500;
var context = canvas.getContext("2d");
context.strokeStyle = "rgb(255, 0, 0)";
context.fillStyle = "#AABBCC";
context.lineWidth = 2;
context.shadowColor = "#0000FF";
context.moveTo(10, 10);
//context.beginPath();
//context.beginPath();
context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height
//context.stroke();
$(canvas).on(
"click",
{ "context": context },
function(e) {
$.log(e.data.context);
var ctx = e.data.context;
ctx.scale(1.1, 1.1); //在最后的大小基础上缩放倍数必须是正数
context.fillRect(10, 10, 50, 50);
context.stroke();
}
);
}
);
旋转
[javascript] view plaincopy
$(
function() {
var canvas = document.getElementById("mycanvas");
canvas.height = 500; //改变默认高度
canvas.width = 500;
var context = canvas.getContext("2d");
context.strokeStyle = "rgb(255, 0, 0)";
context.fillStyle = "#AABBCC";
context.lineWidth = 2;
context.shadowColor = "#0000FF";
context.moveTo(10, 10);
//context.beginPath();
//context.beginPath();
context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height
//context.stroke();
$(canvas).on(
"click",
{ "context": context },
function(e) {
$.log(e.data.context);
var ctx = e.data.context;
ctx.rotate((Math.PI / 180) * 10); //旋转的角度，旋转的中心是canvas坐标原点
context.fillRect(10, 10, 50, 50);
context.stroke();
}
);
}
);

transform，transform的参数比较多，也比较难理解，简单的说transform是最自由的变形方式，下面给出些参考

[javascript] view plaincopy
//以下两段代码结果一致
context.transform(1, 0, 0, 1, 10, 10)
context.translate(10, 10);
//以下两段代码结果一致
context.transform(10, 0, 0, 10, 0, 0);
context.scale(10, 10);
//以下三段代码结果一致
context.transform(Math.cos((Math.PI / 180) * 10), Math.sin((Math.PI / 180) * 10), -Math.sin((Math.PI / 180) * 10), Math.cos((Math.PI / 180)) * 10, 0, 0);
context.transform(-Math.sin((Math.PI/180)*10),Math.cos((Math.PI/180)*10),Math.cos((Math.PI/180)*10)，Math.sin((Math.PI/180)*10), 0,0);
context.rotate(10);

组合

[javascript] view plaincopy
$(
function() {
var canvas = document.getElementById("mycanvas");
canvas.height = 100;
canvas.width = 100;
var context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
//默认新图形会覆盖在原有内容之上
context.globalCompositeOperation = "source-over";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
$(canvas).toggle(
function() {
canvas.width = 100;
// 原有内容之下绘制新图形
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的
context.clearRect(0, 0, 500, 500);
context.beginPath();
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "source-in";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的destination-in
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "destination-in";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//只有新图形中与原有内容不重叠的部分会被绘制出来source-out
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "source-out";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//原有内容中与新图形不重叠的部分会被保留
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "destination-out";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "source-atop";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "destination-atop";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//两图形中重叠部分作加色处理
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "lighter";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//两图形中重叠的部分作减色处理darker
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "darker";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//重叠的部分会变成透明
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "xor";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
},
function() {
canvas.width = 100;
//只有新图形会被保留，其它都被清除掉
context.clearRect(0, 0, 500, 500);
context.beginPath();
context = canvas.getContext("2d");
context.fillStyle = "#AABBCC";
context.fillRect(10, 10, 50, 50);
context.globalCompositeOperation = "copy";
context.fillStyle = "blue";
context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.fill();
$("span").html(context.globalCompositeOperation);
alert("演示结束");
}
);
}
);
字体（看文档说canvas的字体支持CSS样式的描写，但是，我不知道怎么样让canvas的font支持CSS3的在线字体）
[javascript] view plaincopy
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<script type="text/javascript">
$.log = function(msg) {
console.log(msg);
}
$(
function() {
var canvas = document.getElementById("mycanvas");
canvas.height = 200;
canvas.width = 200;
var context = canvas.getContext("2d");
context.font = "20px 新宋体";
context.fillText("这是实心新宋体", 10, 30);
context.strokeText("这是空心新宋体", 10, 60);
context.font = "20px Tangerine serif";
context.fillText("Hello HTML5", 10, 100);
context.strokeText("Hello HTML5", 10, 150);
}
);
</script>

我们尝试写一圈旋转的文字，吧上面的知识点合起来看看效果

[javascript] view plaincopy
$(
function() {
var canvas = document.getElementById("mycanvas");
canvas.height = 500;
canvas.width = 500;
var context = canvas.getContext("2d");
context.translate(150, 150);
context.scale(0.7, 0.7);
context.font = "12px Tahoma";
for (var i = 0; i < 12; i++) {
context.fillText((i + 3) % 12 == 0 ? 12 : (i + 3) % 12, 150, 10);
context.rotate((Math.PI / 6));
}
}
);

在具体绘制的时候，定位总是让我这样没有空间感的人感觉痛苦，所以我现在canvas上画上很多格子，帮助我进行布局

[javascript] view plaincopy
$(
function() {
var canvas = document.getElementById("mycanvas");
canvas.height = 500;
canvas.width = 500;
var context = canvas.getContext("2d");
context.lineWidth = 1;
context.strokeStyle = "rgb(211,211,211)";
for (var i = 0; i < 50; i++) {
$.log(i);
context.moveTo(i * 10, 0);
context.lineTo(i * 10, 500);
context.stroke();
}
for (var i = 0; i < 50; i++) {
$.log(i);
context.moveTo(0, i * 10);
context.lineTo(500, i * 10);
context.stroke();
}
}
);

前面的准备工作都完成了，现在我们来综合下，完成一个具有时分秒的会动的钟

$(
function() {
clock();
setInterval(clock, 1000);
}
);
function clock() {
var canvas = document.getElementById("mycanvas");
canvas.height = 500;
canvas.width = 500;
var context = canvas.getContext("2d");
context.beginPath();
context.lineWidth = 1;
context.strokeStyle = "rgb(211,211,211)";
for (var i = 0; i < 50; i++) {
$.log(i);
context.moveTo(i * 10, 0);
context.lineTo(i * 10, 500);
context.stroke();
}
for (var i = 0; i < 50; i++) {
$.log(i);
context.moveTo(0, i * 10);
context.lineTo(500, i * 10);
context.stroke();
}
context.beginPath();
context.strokeStyle = "rgb(255,0,0)";
context.arc(250, 250, 200, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.stroke();
context.save(); //存储当前画布坐标系状态
context.beginPath();
context.font = "14px Tahoma"
context.translate(255, 255); //将坐标系坐标原点移至图中间
context.strokeStyle = "#FFFFFF";
for (var i = 0; i < 12; i++) {
context.fillText((i + 3) % 12 == 0 ? 12 : (i + 3) % 12, 180, 0);
context.rotate((Math.PI / 6));
}
context.restore();
context.save();
context.beginPath();
context.lineWidth = 5;
context.translate(255, 255); //将坐标系坐标原点移至图中间
for (i = 0; i < 60; i++) {
if (i % 5 != 0) {
context.beginPath();
context.moveTo(180, 0);
context.lineTo(190, 0);
context.stroke();
}
context.rotate(Math.PI / 30);
}
context.restore();
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours() >= 12 ? now.getHours() - 12 : now.getHours();
context.save();
context.translate(255, 255); //将坐标系坐标原点移至图中间
// - (Math.PI / 6) * 3 是因为0度在3点这里
context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec - (Math.PI / 6) * 3);
context.lineWidth = 14;
context.beginPath();
context.moveTo(-20, 0);
context.lineTo(150, 0);
context.stroke();
context.restore();
context.save();
context.translate(255, 255); //将坐标系坐标原点移至图中间
context.rotate(min * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3)
context.lineWidth = 10;
context.beginPath();
context.moveTo(-28, 0);
context.lineTo(160, 0);
context.stroke();
context.restore();
context.save();
context.translate(255, 255); //将坐标系坐标原点移至图中间
context.lineWidth = 1;
context.rotate(sec * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3)
context.lineWidth = 10;
context.beginPath();
context.moveTo(-28, 0);
context.lineTo(160, 0);
context.stroke();
context.restore();
}

本文转自shyleoking 51CTO博客，原文链接:http://blog.51cto.com/shyleoking/864007

使用HTML5的canvas做一个会动的时钟相关推荐

css3 做一个会动的菜单 menu 按钮动画效果
css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo. 设计师给了俩图片,一个是三这样的菜单图标 ...
php 影院选座js代码,在react中用canvas做一个电影院选座功能
又到了每日分享了.这次分享的是:在react中用canvas做一个电影院选座功能. 前言:项目采用create-react-app脚手架,就是做了一个效果所以只有一个页面但是也用了react-rout ...
Html5基于Canvas画一个动态时钟
文章目录前言一.前期准备二.绘制刻度 1.流程 2.效果图三.绘制文字 1.流程 2.效果图四.绘制指针 1.取得当前时间 2.绘制秒针 3.绘制分针 4.绘制时针 5.效果图五.绘制圆心 ...
html数独游戏制作,使用HTML5的dragdrop做一个数独游戏
数独是很好玩的游戏,之前我用jQuery做了一个数独游戏,因为用javaScript来实现drag和drap非常麻烦,jQuery的UI提供了一套非常不错的drag和drap(以后就简称DnD算了), ...
android canvans 画3d,如何用Canvas做一个3D球
先前在博客园看过Waxes同学在博客园做的3D球的Demo,地址在这把他的Demo pull了下面,很多数学公式,即便在他的博客园里也有两个公式无法解释.因此,这里就写一篇自己思路的文章,教大家如何 ...
js：使用canvas做一个图片标注功能
canvas相关库的选择名称 star(2021.3) 文档备注 fabricjs 18.2k http://fabricjs.com/ -------- konva 6k https://kon ...
使用JS和Canvas做一个html5小游戏
这是一个很简单的html5游戏,通过学习原博文自己做了些改造, 现在附上原博文的链接这是游戏的截图: 1.有计算抓住的怪物的数量 2.有背景,英雄,怪物. 第一步:建立html文件和js文件建立一 ...
canvas做一个简单气泡图
数据结构: [{name: '土豆',num: 200,}, {name: '西瓜',num: 80,}, {name: '黄瓜',num: 85,}, {name: '粉丝',num: 70,}, ...
【百战GAN】二次元宅们，给自己做一个专属动漫头像可好！
大家好,欢迎来到专栏<百战GAN>,在这个专栏里,我们会进行算法的核心思想讲解,代码的详解,模型的训练和测试等内容. 作者&编辑 | 言有三本文资源与生成结果展示本文篇幅:68 ...

使用HTML5的canvas做一个会动的时钟

使用HTML5的canvas做一个会动的时钟相关推荐

最新文章

热门文章