canvas绘图基础

Canvas

Var canvas = document.getElementById(‘canvas’)

Var context = canvas.getContext(‘2d’)

使用context进行绘制，canvas绘图的所有接口都是通过context上下文环境进行绘制的

画一条直线

Canvas绘图是基于状态的绘图，以下表示状态

Context.moveTo(100,100)开始的点

context.lineTo(700,700)想要到达的点

context.lineWidth=10直线的宽度

context.strokeStyle=”#058”指定线条的样式，主要是指颜色

绘制图形

Context.stroke()

 

画折线：

多个lineTo依次连接

 

context.beginPath();指定路径开始的地方，表示从这里开始我将进行一次全新的路径绘制。使用中，如果前一个属性没被改变的话，它将一直使用这个属性，直至改变为止。

beginTo和lineTo放在一起相当于moveTo的功能

 

 

画一个封闭的多边形

Context.beginPath()和context.closePath()组合使用来绘制一个封闭的多边形，且在封闭的结尾处完美封闭。moveTo，容易导致结尾处封闭不完全。

beginPath和closePath成对出现会自动完成封闭图形的绘制，尽管最后一条线没有画。

 

为封闭多边形进行颜色的填充

context.fillStyle=”yellow”;

Context.fill();

如果先把封闭图形绘制后再填充，那么直线宽度的里面半部分会被填充色盖住，因此如果想显示线条的原始宽度，应该先将填充色填充后，再绘制线条context.stroke()描边。

 

 

绘制矩形

Rect

Cxt.rect(x,y,width,height);

左上角位置，宽和高

Cxt.fillRect(x,y,width,height);

直接使用当前的fillStyle绘制矩形

cxt.strokeRect(x,y,width,height);

直接使用当前的strokeStyle绘制矩形

后绘制的图形与前面绘制的图片在区域上出现了重叠，则后绘制的图像会遮挡前绘制的图像。

 

 

fillStyle 和 strokeStyle这两个属性的赋值

#FFFFFFF

#642

Rgb(255,128,0)

Rgba(100,100,100,0.8)

Hsl(20,62%,28%)

Hsla(40,82%,33%,0.6)

Red

 

lineCap用于设置线条两端的形状

Butt(default)

Round

Square

 

 

绘制五角星

Function drawStar(cxt,r,R,x,y)

cxt.beginPath();

for(var i = 0;i<5;i++){

cxt.lineTo(Math.cos(18+i*72)/180*Math.PI)*R+x,

-Math.sin(18+i*72)/180*Math.PI)*R+y);

cxt.lineTo(Math.cos(54+i*72)/180*Math.PI)*r+x,

-Math.sin(54+i*72)/180*Math.PI)*r+y);

}

cxt.closePath();

 

 

线条的属性：

lineJoin=”bevel”

Miter(default)呈现尖角

Bevel线条的顶端不会延伸形成一个角，而是方角代替

Round线条相接的时候使用圆滑角过度

 

Miter的值收到miterLimit的限制

miterLimit

当使用miterLimit作为线条和线条相接的方式时，所产生的内角和外角距离的最大值。当超过miterLimit的时候，将自动装潢成bevel来显示

 

图形变换

Translate(x,y)把图像原地位移到x,y处，平移操作

Rotate(deg)旋转一个度数

Scale(sx,sy)横向sx倍的缩放。。

Translate作用是叠加的，

 

Context.save();保存图形当前状态

Context.restore();成对出现

在restore和save之间可以随意改变canvas状态而不影响后续的图形绘制

Scale操作具有副作用，不仅放大图形的对象，坐标，线宽也会改变

 

变换矩阵

a水平缩放（1）

b水平倾斜（0）

C垂直倾斜（0）

D垂直缩放（1）

E水平位移（0）

F垂直位移（0）

设置变换矩阵

Transform（a,b,c,d,e,f）,transform变换有级连的作用，变换叠加

setTransform会让之前的transform效果失效，只是自己设置效果的显示。

 

 

线性渐变

fillStyle

线性渐变色

Var grd=context.createLinearGradient(xstart,ystart,xend,yend);

grd.addColorStop(stop,color);

径向渐变色

Var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);

grd.addColorStop(stop,color);

 

createPattern(img,repeat-style)

Repeat-style:no-repeat,repeat-x,repeat-y,repeat

 

var backgroundImage=new Image();

backgroundImage.src="";

backgroundImage.onload=function(){

var pattern=document.createPattern(backgroundImage,"no-repeat");

context.fillStyle=pattern;

context.fillRect(0,0,800,800);

}

 

createPattern(canvas,repeat-style)

createPattern(video,repeat-style)

 

画一个弧

Context.arc(conterx,centery,radius,startingAngle,endingAngle,anticlockwise=false)顺时针绘制

 

绘制圆角矩形

function drawRoundRect(cxt,x,y,width,height,radius){

cxt.save();

cxt.translate(x,y);

pathRoundRect(cxt,width,height,radius);

cxt.strokeStyle="black";

cxt.restore();

}

function pathRoundRect(cxt,width,height,radius){

cxt.beginPath();

cxt.arc(width-radius,height-radius,radius,0,Math.PI/2);

cxt.lineTo(radius,height);

cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI);

cxt.lineTo(0,radius);

cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);

cxt.lineTo(width-radius,0);

cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);

cxt.lineTo(0,radius);

cxt.closePath();

}

 

 

使用arcTo首先需要使用moveTo函数移动到一个初始点(x0,y0).

Context.moveTo(x0,y0);

context.arcTo(x1,y1,x2,y2,radius);起始点的坐标(x0,y0),绘制两条直线相切的圆弧

 

绘制弯月

二次贝塞尔曲线

context.moveTo(x0,y0);

context.quadraticCurveTo(x1,y1,x2,y2);

起点和终点坐标就是x1,x2,y1,y2

 

 

三次贝塞尔曲线

context.moveTo(x0,y0);

context.bezierCurveTo(x1,y1,x2,y2,x3,y3);

 

 

Canvas文字渲染

Context.font=”bold 40px Arial”

Context.fillText(string,x,y);

context.strokeText(string,x,y);绘制一行文字，同时这行文字只有外边框

 

Context.fillText(string,x,y,[maxlen]);

context.strokeText(string,x,y,[maxlen]);限制文字的宽度

 

Font默认值：”20px sans-serif”

Context.font=font-style font-variant font-weight font-size font-family

Font-style:

Normal

Italic斜体字

Oblique倾斜字体

 

Font-variant：

Small-caps

 

Font-weigth:

Font-weight:lighter

Normal

Bold

Bolder更粗

100,2000,300,400（normal）,500,600,700（bold）,800,900

 

Font-size:

20px

2em

150% xx-small x-small medium large x-large xx-large

 

Font-family

设置多种字体备选，支持@font-face web安全字体

 

 

文本对齐

context.textAlign = left center right

文本对齐

contex.textBaseline=top middle bottom alphabetic(default) ideographic hanging

 

文本的度量

Context.measureText(string).width

 

阴影的绘制

Context.shadowColor   context.shadowOffsetX  context.shadowOffsetY  context.shadowBlur

只需直接设置这些状态值就可以

 

globalAlpha

globalCompositeOperation=”source-over|destination-over”source绘制的图像在重叠的时候产生的效果，后绘制的图像压制前绘制的图形

globalCompositeOperation=source-over | source-atop | source-in | destination-over | destination-atop | destination-in | destination-out | lighter | copy | xor

 

剪辑区域

Context.clip(),使用刚才的路径，把它剪切为当前的路径

 

context.isPointInPath(x,y)判断坐标点是否在绘制的内容里面

标准的获取鼠标点击在canvas中位置的代码

var x=event.clientX-canvas.getBoundClientRect().left;

var y=event.clientY-canvas.getBoundClientRect().top;