html5画直线带箭头 画圆

参考资料

直接贴代码了，对旋转那里我也是瞎蒙的

画圆比较简单

ctx.beginPath();
  ctx.fillStyle = "rgba(255,0,0,0.2)";  
  ctx.save(); 
  ctx.translate(120,120);
  ctx.arc(30,30,80,20*Math.PI/180,2*Math.PI,true);   
  ctx.fill();  
  ctx.restore();  
  ctx.closePath(); 

arc的参数分别是（圆心x,圆心y,半径,起始角度，终止角度）  最后那个参数可选，规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

现在说一下save 和 restore的用法。 

首先说明的是，虽然每次调用函数，但是得到的canvas对象还是一个，如果知道opengl的pushMatrix和popMatrix的话，就明白他们是一个意思。就是把save之前的状态压到栈里，经过一番处理后，再把原来的栈弄出来（restore）

还有一点要注意：

在canvas中定义width、height跟在style中定义width和height是不同的，canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值(width:300px，height:150px)

前些天帮同学看了python画雪花的代码发现我的画法是基于坐标的，其实可以基于极坐标画，示例如下

import turtle
scale=3 #become longer
def koch(t, length):
    if length < 3:
        t.forward(length*scale)	
        return
    x = length/3.0
    koch(t, x)
    t.left(60)
    koch(t, x)
    t.right(120)
    koch(t, x)
    t.left(60)
    koch(t, x) 
koch(turtle, 100):