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绘图基础第二步
//设置状态
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;