关闭

html5 canvas制作箭头

标签: canvashtml5
1112人阅读 评论(0) 收藏 举报
分类:

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8619次
    • 积分:102
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论