本文共 941 字，大约阅读时间需要 3 分钟。

1:创建一个canvas画布

< canvas id=“myCanvas” width=“200” height=“100”></ canvas>

2:获取绘图的上下文

var c = document.getElementById(“myCanvas”); var t=c.getContext(“2d”);

3:body中插入一个图片

4:2d绘图上下文

(1)填充和描边

填充:fillstyle(“颜色”) 描边:strokeStyle(“颜色”) (2)绘制矩形 实心矩阵:fillRect() 空心矩阵:strokeRect() 擦除矩阵上的某一块区域:clearRect() 参数1:x坐标,参数2:y坐标,参数3:矩阵的宽度,参数4:矩阵的高度

案例1:

案例2:

案例3:

5:绘制路径 beginPath()绘制新的路径 arc(圆心的x,圆心的y,半径绘制一条弧线,起始角度,结束角度,是否逆时针计算起始角度和结束角度) arcTo(x1,y1,x2,y2,radios),以半径radios,经由(x1,y1)绘制一条从上一点到(x2,y2)的弧线 bezierCurveTo(c1x,c1y,c2x,c2y,x,y) 以(c1x,c1y)和(c2x,c2y)为控制点,绘制一条从上一点到(x,y)的弧线 lineTo(x,y)绘制一条上一点到(x,y)的直线 moveTo(x,y)把绘制光标移动到(x,y) quadraticCurveTo(cx,cy,x,y)(cx,cy)为控制点,绘制一条从上一点到(cx,cy)的弧线 rect(x,y,width,height)绘制一个矩形,它只是一个路径不是图形

ispointPath(x,y)判断指定的点是否在路径上

转载地址：http://xvtzi.baihongyu.com/