? ?Canvas对象表示一个html元素<canvas>,它自己并没有行为，但是它将绘图的API交给了客户端脚本javascript。从而我们有机会运用javascript将我们想要绘制的东西展示在canvas画布上。它可以绘制路径、矩形、圆、字符以及图像等，注意canvas只是一个绘图容器，正真的绘图操作还得依靠javascript的API。

? ?Canvas绘图：

? 首先我们需要获取canvas对象，并从canvas对象中得到二维对象。

??

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d');

?绘制路径API：

? moveTo(x,y):显示指定路径的起点坐标为(x,y)，默认原点为屏幕的左上角，横向为X轴，纵向为Y轴。

? lineTo(x,y):绘制一条从起点到(x,y)的直线，并且将起始位置设置为(x,y)

? rect(left , top , width , height):绘制一个已知左上角位置的，以及高宽的矩形，绘制完成后起点设置为左上 ?角端点的位置。

? arcTo(x1,y1,x2,y2,radius):用于绘制一个与两条线段相切的圆弧，两条线段分别以当前Context的起点和 ? ? ? ? ?(x2,y2)为起点，都以(x1,y1)为终点，圆弧半径为radius。绘制完成后起点将会设置为(x1,y1)和(x2,y2)形 ? ? 成线段与圆弧的切点位置。

? arc(x,y,radius,startAngle,endAngle,anticlockwise):用于描绘一个以(x, y)点为圆心，radius为半径，startAngle为起始弧度，endAngle为终止弧度的圆弧。anticlockwise为布尔型的参数，true表示逆时针，false表示顺时针。参数中的两个弧度以0表示0°，位置在3点钟方向；Math.PI值表示180°，位置在9点钟方向。

quadraticCurveTo( cpx , cpy , ?x , ?y) : 以当前Context绘制起点为起点，(cpx,cpy)点为控制点，(x, y)点为终点的二次样条曲线路径。

bezierCurveTo( cpx1 , cpy1 , ?cpx2 , ?cpy2 , ?x , ?y)： 以当前Context绘制起点为起点，(cpx1,cpy1)点和(cpx2, cpy2)点为两个控制点，(x, y)点为终点的贝塞尔曲线路径。

绘制与填充

stroke() : 按照路线绘线条。

fill() : 使用当前设置好的 style 来填充路径区域。

clip() : 按照已有的路线在画布中设置剪辑区域，调用后图形编辑代码只会对编辑区域有效，对外界无效。如未调用则就是当前整个 canvas 为编辑区域。

?直接绘制图形：

? fillRect(left,top,width,height):使用当前的fillStyle样式填充一个左顶点在(left,top)，宽高为width、height的矩形。

? strokeRect(left,top,width,height):使用当前的线段风格绘制一个左顶点在(left,top),宽高为width、height的矩形。

? clearRect(left,top,width,height):清除左顶点在(left,top)，宽高为width、height的矩形内的所有内容。

绘制图片：

context对象的drawImage()方法可以将外部的图片绘制到canvas上。drawImage方法有如下3中重构方法。

drawImage(image,dx,dy)//dx->destination x drawImage(image,dx,dy,dw,dh) drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)//sx->source x

?这些参数的含义，如下图

?

中国学网

?

?

大小: 17.3 KB

查看图片附件