canvas绘图基础

canvas绘图基础第一步

1.canvas绘图首先在html的body中添加如下标签

<canvas id="canvas"></canvas>

2.在script标签中编写相关js代码：

首先获取canvas的dom对象，然后获取上下文对象context，之后就可以通过context对象绘图啦。( 获取context对象时，需要传入参数 "2d")

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

可以通过canvas.width和canvas.height来为你的canvas设置宽和高。

canvas绘图基础第二步

d raw one line

//设置状态
context.moveTo(x1,y1);//放置笔尖的起始位置
context.lineTo(x2,y2);//连接两点
context.lineWidth=10;//设置线条的宽度
context.strokeStyle="#058";//设置线条的样式
//绘制，即描边
context.stroke();

draw more lines

context.beginPath()
//绘制...
context.closePath() //可选(会将起始点和结束点连接起来)

draw //填充（先填充，再描边）

context.fillStyle="yellow"//也可以填充其他内容:color/gradient/image/canvas/video
context.fill();

draw a rectangle

//通过线条绘制矩形
cxt.moveTo(x,y)
cxt.lineTo(x+width,y)
cxt.lineTo(x+width,y+height);
cxt.lineTo(x,y+height)

//三个绘制矩形的函数如下

cxt.rect(x,y,width,height)
cxt.fillRect(x,y,width,height)
cxt.strokeRect(x,y,width,height)

线条的其他属性：

lineCap:用于线条两端(开始处和结尾处)的形状

取值：butt(default)/round(圆形头)/square(方形头)

lineJoin:指定线条相交的时候的形态

取值：miter(default尖角)/bevel(斜接)/round(圆角)

miterLimit=10(默认)

图像变换：translate(x,y),rotate(deg),scale(sx,sy)

canvas状态的保存和恢复： save()/restore()

线性渐变：

var grd=context.createLinearGradient(xstart,ystart,xend,yend);
grd.addColorStop(stop,color);
context.fillStyle=grd;

径向渐变：

var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
grd.addColorStop(stop,color);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

draw an arc

context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false(可选，默认顺时针))

角的度数如下： π = Math.PI

贝塞尔曲线Bezier

QuadraticCurveTo（贝塞尔二次曲线）
context.moveTo(x0,y0);
context.quadraticCurveTo(x1,y1,x2,y2);
BezierCurveTo（贝塞尔三次曲线）
context.moveTo(x0,y0);
context.bezierCurveTo(x1,y1,x2,y2,x3,y3);

设置阴影

context.shadowColor
context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur//阴影模糊程度

drawImage

context.drawImage(image,dx,dy);
context.drawImage(image,dx,dy,dw,dh);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

//获取鼠标针对当前canvas的坐标

var x=event.clientX-canvas.getBoundingClientRect().left;
var y=event.clientY-canvas.getBoundingClientRect().top;

猜你喜欢