Canva可画（Windows版）

Windows版Canva可画，适用于Windows 10及以上版本。无需担心网络波动，无需顾虑浏览器兼容性，让你能够更加专注在设计上。

下载

在上一篇中我们了解html5的canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 canvas的路径绘图，beginpath，closepath，rect，arc等，还有就是html5 canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。
多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以。
ff下效果图：
 
代码：

复制代码

代码如下:

你的浏览器还不支持哦
<script type="text/javascript"> <br>var c = document.getElementById("myCanvas"); <br>var cxt = c.getContext("2d"); <br>var slen = 60; <br>var mlen = 50; <br>var hlen = 40; <br>cxt.strokeRect(0, 0, c.width, c.height); <br>cxt.beginPath(); <br>cxt.strokeStyle = "#00f"; <br>cxt.fillStyle = "#00f"; <br>cxt.arc(200, 150, 5, 0, 2 * Math.PI, true); <br>cxt.fill(); <br>cxt.closePath(); <br>cxt.beginPath(); <br>cxt.strokeStyle = "#00f"; <br>cxt.arc(200, 150, 100, 0, 2 * Math.PI, true); <br>cxt.stroke(); <br>cxt.closePath(); <br>cxt.beginPath(); <br>cxt.translate(200, 150); //平移原点； <br>cxt.rotate(-Math.PI / 2); <br>cxt.save(); <br>for (var i = 0; i < 60; i++) { <br>if (i % 5 == 0) { <br>// cxt.fillStyle = "#ff0000"; <br>cxt.fillRect(80, 0, 20, 5); <br>cxt.fillText("" + (i / 5 == 0 ? 12 : i / 5), 70, 0); <br>} else { <br>// cxt.strokeStyle = "#00f"; <br>cxt.fillRect(90, 0, 10, 2); <br>} <br>//document.getElementById("div1").innerText += " " + i; <br>cxt.rotate(Math.PI / 30); <br>} <br>cxt.closePath(); <br>var ls = 0, lm = 0, lh = 0; <br>function Refresh() { <br>cxt.restore(); <br>cxt.save(); <br>cxt.rotate(ls * Math.PI / 30); <br>cxt.clearRect(5, -1, slen+1, 2+2); <br>cxt.restore(); cxt.save(); <br>cxt.rotate(lm * Math.PI / 30); <br>cxt.clearRect(5, -1, mlen+1, 3+2); <br>cxt.restore(); cxt.save(); <br>cxt.rotate(lh * Math.PI / 6); <br>cxt.clearRect(5, -3, hlen+1, 4+2); <br>var time = new Date(); <br>var s = ls=time.getSeconds(); <br>var m = lm=time.getMinutes(); <br>var h = lh=time.getHours(); <br>cxt.restore(); <br>cxt.save(); <br>cxt.rotate(s * Math.PI / 30); <br>cxt.fillRect(5, 0, slen, 2); <br>cxt.restore(); cxt.save(); <br>cxt.rotate(m * Math.PI / 30); <br>cxt.fillRect(5, 0, mlen, 3); <br>cxt.restore(); cxt.save(); <br>cxt.rotate(h * Math.PI / 6); <br>cxt.fillRect(5, -2, hlen, 4); <br>} <br>var MyInterval = setInterval("Refresh();", 1000); <br></script>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！