效果图:
效果链接:
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
分享到:
相关推荐
EaselJS是基于HTML5 Canvas的一个JavaScript库,它为Canvas提供了一个更加高级、易于使用的API,使得动画制作和图形操作变得更加简单。 在HTML5 Canvas上制作流程图,首先我们需要理解Canvas的基本概念。Canvas是一...
本实例展示了如何使用HTML5 Canvas实现一个跟随鼠标旋转的箭头效果。这个功能主要涉及到Canvas的基本操作、鼠标事件监听以及动态图形的渲染。 首先,我们需要创建一个Canvas元素,并设置其宽高和样式,确保它在页面...
在HTML5中,`canvas`元素提供了一个动态的图形绘制平台,允许开发者通过JavaScript来创建丰富的视觉效果。在这个“canvas画箭头”的示例中,我们将深入探讨如何使用canvas API来绘制箭头,以及相关的一些JavaScript...
在示例代码中,`arrow.html`文件展示了一个简单的HTML页面,包含了Canvas元素和引用`arrow.js`的脚本。当页面加载时,Canvas元素会被用来绘制箭头。 总之,这个基于HTML5 Canvas的箭头组件提供了一种灵活的方式来在...
在HTML5和CSS3的基础上,JavaScript可以处理用户交互、数据操作、动画效果等。ES6(ECMAScript 6,也称ES2015)的推出,为JavaScript添加了类(Classes)、模块(Modules)、箭头函数(Arrow Functions)等新特性,...
然后,遍历所有物体并根据它们的位置和旋转在`canvas`上绘制。为了流畅的动画效果,通常使用`requestAnimationFrame`函数来循环更新和绘制。 6. **事件处理**:可能需要添加用户交互,比如点击或触摸事件,来模拟...
本文将深入探讨如何使用JavaScript的基本绘图API,即HTML5的Canvas API来实现这一功能。 Canvas API是HTML5的一个重要组成部分,它提供了一个二维绘图表面,允许开发者通过JavaScript进行动态图形绘制。首先,你...
在本项目中,我们主要...这是一个很好的练习项目,可以帮助提升编程技巧,并对HTML5的Canvas API有更深入的理解。通过阅读和分析提供的代码,你将能够掌握更多的实战经验,并可能发现优化游戏性能和用户体验的新方法。
我仅使用HTML5的本地Canvas API ,自定义物理引擎和手动Sprite动画,从头开始设计并构建了此循环侧滚动器。 我还在Sketch中将不同的开源SVG编织在一起,以创建一个无缝的多层背景。 该项目最具挑战性的部分之一是...
这可能涉及到JavaScript的数学运算,比如向量旋转、平移等,以及可能利用了HTML5 Canvas或者Three.js这样的图形库来渲染图形。 `WeirdSpinnyThing-master`这个文件名暗示了这是一个项目的主分支或者是最完整的版本...