效果图：
效果链接：
http://www.108js.com/article/canvas/9/demo.html
代码：
<!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>
源码下载：
- 大小: 9.3 KB
- 9.zip (774 Bytes)
- 下载次数: 2
分享到：
相关推荐
HTML5 canvas纸片3D旋转动画代码，3D旋转代码，卷曲噪音动画。
1、html5 2、地球旋转 3、canvas
canvas粒子旋转动画是一款类似龙卷风旋转特效。可调节
html5 canvas绘制3D地球旋转动画特效
一款基于html5 canvas绘制的彩色碎片组合球形旋转动画特效，还可以用鼠标拖动进行旋转。
酷炫的html5 canvas全屏背景动画特效
全屏背景动画的实现是由canvas完成
html5 canvas页面滚动背景图片旋转动画特效
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
HTML5 Canvas粒子火焰动画特效，
jquery html5 canvas翻滚熔岩动画背景特效 jqueryhtml5 canvas翻滚熔岩动画背景特效
HTML5 Canvas绕月球动画特效是一款酷炫的卡通月球旋转动画特效下载。
基于html5 canvas绘制的彩色虚幻发光丝带3D旋转动画特效，通过鼠标拖动控制3D旋转。
HTML5 Canvas 旋转的3D立方体动画，有纵深感的旋转立方体，渲染的很不错，旋转的动画效果流畅，十分不错，是研究HTML5 Canvas技术的好范例。经测试，IE11兼容，火狐或Chrome、Opera等都有完美表现。
8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画
这是一款基于HTML5 Canvas的3D地球模拟动画，动画以太空作为背景，地球在太空中旋转，同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画，记得在很早以前我们也...
HTML5 Canvas表白爱心动画特效是一款浪漫酷炫的情人节告白爱心动画特效。
html5 canvas炫酷的万花筒旋转动画特效
HTML5 3D动画应用非常广泛，我们之前也分享过很多炫酷的HTML5动画应用。今天要介绍的这款HTML5 3D动画是一个旋转的物体，并且利用CSS3的特性，物体会发出模糊和发光的动画特效，旋转起来效果特别酷。