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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

android 使用Canvas画箭头

画箭头这个东西太麻烦啦,开始想用把箭头画好,然后到指定点旋转的方法,但是,效果一直不好。想用数学的方法来画,但是发现计算很复杂啊。于是google,发现一个兄台使用了java当中的awt实现了画箭头(...

用Canvas画带箭头的线(包括箭头向内和箭头向外)

利用角度去画箭头,其实箭头也是用线段来画的,主要是要算好箭头的坐标。所以在这里,Math函数起到了至关重要的地位了。

html5画直线箭头

Text window.onload = function(){ arrow2("myCanvas",0,0,0,0,300,100) arrow2("myCanvas",0...

绘制类似QQ截图中的箭头(使用Canvas画箭头)

canvas是HTML5的一个新添加的元素,HTML5 canvas是一个原生HTML绘图薄,用于Javascript代码,不使用第三方工具。 canvas部分方法列表:   ...

html5 Canvas制作的网页颜色拾取器

学习html5有一段时间了,本人也非常期待html5给我们带来的方便。         在线演示地址 在底部评论第一条        这里写一个小小的应用,应用htm...

HTML5:canvas制作时钟

  • 2017-02-22 18:13
  • 16KB
  • 下载

自己写的HTML5 canvas动画制作函数,非常简单易懂

name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=0.36, minimum-s...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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