首页 > 脚本 > 网络编程 > Canvas API开发路径坐标绘图变化的案例教程,html5之Canvas路径绘图、坐标变换应用实例

Canvas API开发路径坐标绘图变化的案例教程,html5之Canvas路径绘图、坐标变换应用实例

来源:整理 时间:2022-03-09 15:08:12 编辑:飘云 手机版
Canvas API开发路径坐标绘图变化的案例教程,html5之Canvas路径绘图、坐标变换应用实例,HTML5是HTML最新的修订版本,由万维网联盟于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。Canvas API 提供了一个通过JavaScript 和 HTML的 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

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

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>
Canvas API开发路径坐标绘图变化的案例教程,html5之Canvas路径绘图、坐标变换应用实例相关文章内容教程说明。
文章TAG:Canvas路径绘图坐标变换html5translate

最近更新

网络编程最新文章

脚本排行榜推荐