簡單HTML5 Canvas Arrow旋轉動畫
阿新 • • 發佈：2019-01-28
效果圖：
[img]http://dl2.iteye.com/upload/attachment/0108/8083/a578e2c3-c0e3-39ca-a192-dc7c0793c6e0.gif[/img]
效果連結：
[url]http://www.108js.com/article/canvas/9/demo.html[/url]
程式碼：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var j=0;
function drawArrow(A){
ctx.save();
ctx.translate(250,250);
ctx.rotate(A);
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(-50,-25);
ctx.lineTo(0,-25);
ctx.lineTo(0,-50);
ctx.lineTo(50,0);
ctx.lineTo(0,50);
ctx.lineTo(0,25);
ctx.lineTo(-50,25);
ctx.lineTo(-50,-25);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
function animate(){
ctx.beginPath();
//ctx.arc(250,250,150,0,Math.PI*2,true);
ctx.stroke();
for(var i=0;i<36;i++)
{
ctx.beginPath();
ctx.arc(250+150*Math.cos(i*2*Math.PI/36),250-150*Math.sin(i*2*Math.PI/36),10,0,Math.PI*2,true);
if(i===j){
ctx.fillStyle="#225599";
ctx.fill();
drawArrow(-i*2*Math.PI/36);
}else{
ctx.stroke();
}
}
j++;
if(j>=36) j=0;
}
loop = setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
animate();
}, 1000);
</script>
</body>
</html>
原始碼下載：
[img]http://dl2.iteye.com/upload/attachment/0108/8083/a578e2c3-c0e3-39ca-a192-dc7c0793c6e0.gif[/img]
效果連結：
[url]http://www.108js.com/article/canvas/9/demo.html[/url]
程式碼：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var j=0;
function drawArrow(A){
ctx.save();
ctx.translate(250,250);
ctx.rotate(A);
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(-50,-25);
ctx.lineTo(0,-25);
ctx.lineTo(0,-50);
ctx.lineTo(50,0);
ctx.lineTo(0,50);
ctx.lineTo(0,25);
ctx.lineTo(-50,25);
ctx.lineTo(-50,-25);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
function animate(){
ctx.beginPath();
//ctx.arc(250,250,150,0,Math.PI*2,true);
ctx.stroke();
for(var i=0;i<36;i++)
{
ctx.beginPath();
ctx.arc(250+150*Math.cos(i*2*Math.PI/36),250-150*Math.sin(i*2*Math.PI/36),10,0,Math.PI*2,true);
if(i===j){
ctx.fillStyle="#225599";
ctx.fill();
drawArrow(-i*2*Math.PI/36);
}else{
ctx.stroke();
}
}
j++;
if(j>=36) j=0;
}
loop = setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
animate();
}, 1000);
</script>
</body>
</html>
原始碼下載：