温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Canvas如何实现坐标变换

发布时间:2022-03-15 15:45:46 来源:亿速云 阅读:217 作者:iii 栏目:web开发

这篇文章主要讲解了“Canvas如何实现坐标变换”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Canvas如何实现坐标变换”吧!

代码如下:

<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如何实现坐标变换”的内容了,经过本文的学习后,相信大家对Canvas如何实现坐标变换这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI