html5 canvas制作箭头

原创 2013年12月05日 20:12:43

今天突然想用HTML5的canvas做一个箭头玩玩儿

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
 window.onload=function() {
   var arrow=document.getElementById("arrow");
   var arrowx=arrow.getContext('2d');
   arrowx.fillStyle='rgb(0,0,0)'; 
   arrowx.translate(140,70)
   arrowx.rotate(45*Math.PI/180);
   arrowx.fillRect(0,0,50,50); 
   arrowx.rotate(45*Math.PI/180);
   arrowx.clearRect(0,-50,100,50);  
   arrowx.fillRect(31, -50, 10, 50);
   
 }
</script>
<style type="text/css">
html,body,canvas,div {
  margin: 0;
  padding: 0;
  border: 0;
}
#back {
  margin-top: 50px;
  background-color: #aaa;
  border-radius: 100px;
  width: 200px;
  height: 200px;
  margin-left: -100px;
}
#arrow {
}
</style>
</head>
<body>
<div id="back">
  <canvas id="arrow">
</canvas>
</div>

</body>
</html>


带动画的自定义view——做一个移动的箭头

有一个需求是做一个移动的箭头,循环往复向上移动的效果。 一开始想到帧动画,让设计切好图,定好时间就ok了。代码很简单: image.setImageResource(R.drawable.anim...

使用Html5的canvas制作的小动画

周末闲来无事,了解了下html5动画制作的一些基本流程,写了个小例子。 记录下来, html代码。在最后测试了下Kinetic.js。 下载地址 http://kineticjs.com  Dow...

HTML5:canvas制作时钟

  • 2017年02月22日 18:13
  • 16KB
  • 下载

HTML5 Canvas制作雷达图实战

雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图。下面,用HTML5的Cavas来实现雷达图。效果一、创建Canvasvar mW = 4...
  • lecepin
  • lecepin
  • 2017年03月05日 13:52
  • 2307

HTML5 canvas制作简单的黑板特效

最近一直在做关于H5 canvas的一些demo,正好碰到有人在讨论高中时候的学生时代,就想做一个那时候看的最多的东西----黑板。        这个效果其实很简单,应该是canvas入门都会做得...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 canvas制作箭头
举报原因:
原因补充:

(最多只允许输入30个字)