html5之Canvas路径绘图、坐标变换应用实例
程序员文章站
2023-12-12 14:19:04
本文写一个html5的时钟应用程序试手主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等多的也不说了，直... 12-12-26...
在上一篇中我们了解html5的canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 canvas的路径绘图，beginpath，closepath，rect，arc等，还有就是html5 canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。
多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以。
ff下效果图：
代码：
<html>
<head>
</head>
<body>
<canvas id="mycanvas" width="600" height="300">你的浏览器还不支持哦</canvas>
<script type="text/javascript">
var c = document.getelementbyid("mycanvas");
var cxt = c.getcontext("2d");
var slen = 60;
var mlen = 50;
var hlen = 40;
cxt.strokerect(0, 0, c.width, c.height);
cxt.beginpath();
cxt.strokestyle = "#00f";
cxt.fillstyle = "#00f";
cxt.arc(200, 150, 5, 0, 2 * math.pi, true);
cxt.fill();
cxt.closepath();
cxt.beginpath();
cxt.strokestyle = "#00f";
cxt.arc(200, 150, 100, 0, 2 * math.pi, true);
cxt.stroke();
cxt.closepath();
cxt.beginpath();
cxt.translate(200, 150); //平移原点；
cxt.rotate(-math.pi / 2);
cxt.save();
for (var i = 0; i < 60; i++) {
if (i % 5 == 0) {
// cxt.fillstyle = "#ff0000";
cxt.fillrect(80, 0, 20, 5);
cxt.filltext("" + (i / 5 == 0 ? 12 : i / 5), 70, 0);
} else {
// cxt.strokestyle = "#00f";
cxt.fillrect(90, 0, 10, 2);
}
//document.getelementbyid("div1").innertext += " " + i;
cxt.rotate(math.pi / 30);
}
cxt.closepath();
var ls = 0, lm = 0, lh = 0;
function refresh() {
cxt.restore();
cxt.save();
cxt.rotate(ls * math.pi / 30);
cxt.clearrect(5, -1, slen+1, 2+2);
cxt.restore(); cxt.save();
cxt.rotate(lm * math.pi / 30);
cxt.clearrect(5, -1, mlen+1, 3+2);
cxt.restore(); cxt.save();
cxt.rotate(lh * math.pi / 6);
cxt.clearrect(5, -3, hlen+1, 4+2);
var time = new date();
var s = ls=time.getseconds();
var m = lm=time.getminutes();
var h = lh=time.gethours();
cxt.restore();
cxt.save();
cxt.rotate(s * math.pi / 30);
cxt.fillrect(5, 0, slen, 2);
cxt.restore(); cxt.save();
cxt.rotate(m * math.pi / 30);
cxt.fillrect(5, 0, mlen, 3);
cxt.restore(); cxt.save();
cxt.rotate(h * math.pi / 6);
cxt.fillrect(5, -2, hlen, 4);
}
var myinterval = setinterval("refresh();", 1000);
</script>
<div id="div1" style=" background:#00f;"></div>
</body>
</html>
多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以。
ff下效果图：
代码：
复制代码
代码如下:<html>
<head>
</head>
<body>
<canvas id="mycanvas" width="600" height="300">你的浏览器还不支持哦</canvas>
<script type="text/javascript">
var c = document.getelementbyid("mycanvas");
var cxt = c.getcontext("2d");
var slen = 60;
var mlen = 50;
var hlen = 40;
cxt.strokerect(0, 0, c.width, c.height);
cxt.beginpath();
cxt.strokestyle = "#00f";
cxt.fillstyle = "#00f";
cxt.arc(200, 150, 5, 0, 2 * math.pi, true);
cxt.fill();
cxt.closepath();
cxt.beginpath();
cxt.strokestyle = "#00f";
cxt.arc(200, 150, 100, 0, 2 * math.pi, true);
cxt.stroke();
cxt.closepath();
cxt.beginpath();
cxt.translate(200, 150); //平移原点；
cxt.rotate(-math.pi / 2);
cxt.save();
for (var i = 0; i < 60; i++) {
if (i % 5 == 0) {
// cxt.fillstyle = "#ff0000";
cxt.fillrect(80, 0, 20, 5);
cxt.filltext("" + (i / 5 == 0 ? 12 : i / 5), 70, 0);
} else {
// cxt.strokestyle = "#00f";
cxt.fillrect(90, 0, 10, 2);
}
//document.getelementbyid("div1").innertext += " " + i;
cxt.rotate(math.pi / 30);
}
cxt.closepath();
var ls = 0, lm = 0, lh = 0;
function refresh() {
cxt.restore();
cxt.save();
cxt.rotate(ls * math.pi / 30);
cxt.clearrect(5, -1, slen+1, 2+2);
cxt.restore(); cxt.save();
cxt.rotate(lm * math.pi / 30);
cxt.clearrect(5, -1, mlen+1, 3+2);
cxt.restore(); cxt.save();
cxt.rotate(lh * math.pi / 6);
cxt.clearrect(5, -3, hlen+1, 4+2);
var time = new date();
var s = ls=time.getseconds();
var m = lm=time.getminutes();
var h = lh=time.gethours();
cxt.restore();
cxt.save();
cxt.rotate(s * math.pi / 30);
cxt.fillrect(5, 0, slen, 2);
cxt.restore(); cxt.save();
cxt.rotate(m * math.pi / 30);
cxt.fillrect(5, 0, mlen, 3);
cxt.restore(); cxt.save();
cxt.rotate(h * math.pi / 6);
cxt.fillrect(5, -2, hlen, 4);
}
var myinterval = setinterval("refresh();", 1000);
</script>
<div id="div1" style=" background:#00f;"></div>
</body>
</html>