效果图：
效果链接：
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`这个文件名暗示了这是一个项目的主分支或者是最完整的版本...