html5-canvas

来源：互联网发布：php js脚本注入攻击编辑：程序博客网时间：2024/06/05 04:56

Reference：

http://www.w3school.com.cn/tags/html_ref_canvas.asp

1 初认识canvas.

(1)设置canvas的宽，高通过，width和height属性，不要通过style属性进行设置，要不然就会bug，里面的绘制的图像大小尺寸会变乱。

2 canvas曲线函数

（1）二次曲线函数：quadraticCurveTo(x,y,x,y);//第一组x y是控制点的坐标，第二组是终点坐标

(2)弧度，arc(x,y,radius,startAngle,endAngle,antiClockWise),注意此处的开始角度和结束角度都是用弧度表示的，（ps：角度与弧度的换算公式：弧度=角度/180 PI）

(3)切线弧 arcTo(x1,y1,x2,y2,radius)，arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。此处的源码为：

function drawTangent(context){context.save();context.lineWidth=15;context.strokeStyle="#CCFF66";context.beginPath();context.moveTo(200,200);context.arcTo(400,100,50,50,70);context.stroke();context.lineWidth=5;context.strokeStyle="#003399";context.moveTo(200,200);context.lineTo(400,100);context.lineTo(50,50);context.stroke();context.restore();}

（2）贝塞尔曲线：bezierCurveTo

0 0