H5 canvas标签 与 js 结合画图

Internet Explorer 8 以及更早的版本不支持 元素。
1.画弧函数context.arc(x,y,r,sAngle,eAngle,counterclockwise);参数描述x圆的中心的 x 坐标。y圆的中心的 y 坐

标。r圆的半径。sAngle起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。eAngle结束角，以弧度计。

counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

2画线lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

context.lineTo(x,y);x为目标位置的横坐标，y为目标位置的纵坐标，因此，lineTo（）方法创建的是一个目标点，

而不是一条线。若要画出具体的线需要首先起始点坐标，再用context.stroke()连接两点;

例   var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");ctx.beginPath();ctx.moveTo(20,20);ctx.lineTo(20,100);ctx.lineTo(70,100);ctx.stroke();

3 绘制二次贝塞尔曲线context.quadraticCurveTo(cpx,cpy,x,y);

开始点：moveTo(20,20)
控制点：quadraticCurveTo(20,100,200,20)
结束点：quadraticCurveTo(20,100,200,20)

4确定点是否在所画路径中

isPointInPath()方法如果指定的点位于当前路径中，则返回 true，否则返回 false

5.矩形绘制context.rect(x,y,width,height);x矩形左上角的 x 坐标y矩形左上角的 y 坐标width矩形的宽度，以像素

计height矩形的高度，以像素计