腾讯欢乐捕鱼刷金币|腾讯欢乐捕鱼大战技巧

canvas 旋轉角度不需要累加

2019-8-24 16:01| 作者: admin| 查看: 3104| 評論: 0|來自: 螞蟻部落

如果您感覺一些代碼比較奇怪,可能有如下幾種可能:

(1).代碼確實比較奇怪。

(2).對于代碼原理不夠了解。

本文分享一段通過canvas繪制旋轉圖案的代碼。

它實現了每隔指定時間旋轉一定角度的功能,代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.ofucs.tw/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid black;
}  
</style>
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");
 
  ctx.translate(100,50);
  let angle=10;
 
  let rotate = () => {
    ctx.clearRect(-100,-50,200,100);
    ctx.rotate(angle*Math.PI/180);
  
    ctx.fillRect(-50,-25,100,50);
    setTimeout(rotate,16);
  }
  rotate()
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

上述代碼實現了矩形圖案的旋轉效果。

但是有沒有發現一個奇怪的現象,角度不用累加。

比如其他效果如果需要實現這種類似的效果,可能需要a=a+1類似累加。

這是因為rotate()旋轉是對坐標系的旋轉,可以認為每一次旋轉后都"歸零"。

再次旋轉就以新的坐標系為參考,而不是以最初的坐標系為參考,所以無需進行累加。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
腾讯欢乐捕鱼刷金币 搜河北十一选五走势图 325棋牌捕鱼游戏官方网 t天天赚钱 上海天天彩选4开奖 国际股票指数期货 浙江11选5计划软件 2006年七星彩历史记录 3d开机号试机号开奖号 辽宁快乐12选5开将结果 天津快乐10分