`
128kj
  • 浏览: 601157 次
  • 来自: ...
社区版块
存档分类
最新评论

简单HTML5 Canvas Arrow旋转动画

阅读更多
效果图:


效果链接:
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
0
0
分享到:
评论

相关推荐

    html5 canvas 制作流程图 EaselJS

    EaselJS是基于HTML5 Canvas的一个JavaScript库,它为Canvas提供了一个更加高级、易于使用的API,使得动画制作和图形操作变得更加简单。 在HTML5 Canvas上制作流程图,首先我们需要理解Canvas的基本概念。Canvas是一...

    html5 canvas实现跟随鼠标旋转的箭头

    本实例展示了如何使用HTML5 Canvas实现一个跟随鼠标旋转的箭头效果。这个功能主要涉及到Canvas的基本操作、鼠标事件监听以及动态图形的渲染。 首先,我们需要创建一个Canvas元素,并设置其宽高和样式,确保它在页面...

    canvas画箭头

    在HTML5中,`canvas`元素提供了一个动态的图形绘制平台,允许开发者通过JavaScript来创建丰富的视觉效果。在这个“canvas画箭头”的示例中,我们将深入探讨如何使用canvas API来绘制箭头,以及相关的一些JavaScript...

    javascript基于HTML5 canvas制作画箭头组件

    在示例代码中,`arrow.html`文件展示了一个简单的HTML页面,包含了Canvas元素和引用`arrow.js`的脚本。当页面加载时,Canvas元素会被用来绘制箭头。 总之,这个基于HTML5 Canvas的箭头组件提供了一种灵活的方式来在...

    最新的疯狂HTML 5_CSS 3_JavaScript讲义源码

    在HTML5和CSS3的基础上,JavaScript可以处理用户交互、数据操作、动画效果等。ES6(ECMAScript 6,也称ES2015)的推出,为JavaScript添加了类(Classes)、模块(Modules)、箭头函数(Arrow Functions)等新特性,...

    【HTML5】使用Box2d模拟飞行箭矢

    然后,遍历所有物体并根据它们的位置和旋转在`canvas`上绘制。为了流畅的动画效果,通常使用`requestAnimationFrame`函数来循环更新和绘制。 6. **事件处理**:可能需要添加用户交互,比如点击或触摸事件,来模拟...

    js画直线带箭头哦

    本文将深入探讨如何使用JavaScript的基本绘图API,即HTML5的Canvas API来实现这一功能。 Canvas API是HTML5的一个重要组成部分,它提供了一个二维绘图表面,允许开发者通过JavaScript进行动态图形绘制。首先,你...

    纯JavaScript实现俄罗斯方块(详细注释 ES6)

    在本项目中,我们主要...这是一个很好的练习项目,可以帮助提升编程技巧,并对HTML5的Canvas API有更深入的理解。通过阅读和分析提供的代码,你将能够掌握更多的实战经验,并可能发现优化游戏性能和用户体验的新方法。

    narwhal-olympics:基于Dolphin Olympics的Vanilla JS浏览器游戏:dolphin:

    我仅使用HTML5的本地Canvas API ,自定义物理引擎和手动Sprite动画,从头开始设计并构建了此循环侧滚动器。 我还在Sketch中将不同的开源SVG编织在一起,以创建一个无缝的多层背景。 该项目最具挑战性的部分之一是...

    WeirdSpinnyThing:一个奇怪的多刺的东西,因为无聊而在做其他事情时产生的。

    这可能涉及到JavaScript的数学运算,比如向量旋转、平移等,以及可能利用了HTML5 Canvas或者Three.js这样的图形库来渲染图形。 `WeirdSpinnyThing-master`这个文件名暗示了这是一个项目的主分支或者是最完整的版本...

Global site tag (gtag.js) - Google Analytics