html5 canvas制作箭头

今天突然想用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>


阅读更多
文章标签: canvas html5
个人分类: html
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

html5 canvas制作箭头

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭