3）使用canvas绘制路径
path:类似于ps中的“钢笔工具”，由多个坐标点组成的任意形状，路径不可见，可用于“描边”、 “填充”，“裁剪”。
| ctx.beginPath() //开始一条新路径 ctx.closePath() //闭合当前路径 ctx.moveTo(x,y) //移动到指定点 ctx.lineTo(x,y) //从当前点到指定点画直线 ctx.arc(cx,cy,r,start,end) ； //绘制圆拱路径 //cx cy 是圆心坐标xy r是半径 ，start 开始角度，end结束角度 |
角度制：360 = 弧度制：2PI 180 = 1PI 例如
| ctx.arc(100,200,30,0,2*Math.PI) ctx.stroke(); //当前路径描边 ctx.fill(); //当前路径填充 ctx.clip();// 使用当前路径进行裁剪 //*********连接处的角*********** ctx.lineJoin='miter' //线的连接处出现尖角 ctx.lineJoin='round' //线的连接处出现圆角 ctx.lineJoin = 'bevel' //线的连接处出现方角 |
4）使用canvas绘制图像
canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片， 且等待图片异步加载完成：
| var img = new Images(); img.src='x.png'; console.log(img.width); //0 异步请求图片 img.onload=function(){ console.log(img.width,img.height); //有值 图片加载完成 //开始绘制图片到画布上 ctx.drawImage(img,x,y); //原始大小绘图 ctx.drawImage(img,x,y,w,h); //设置宽高 } |
监听鼠标在画布上方移动事件
| ctx.onmousemove = function(e){ x=e.offsetX; y=e.offsetY; console.log(x,y); } |
2、canvas绘图中渐变
线性渐变：linearGradient 径向渐变：radialGradient 可以参考ps中渐变效果、
| var g = ctx.createLinearGradient(x1,y1,x2,y2); g.addColorStop(0,'#f00'); g.addColorStop(0.5,'#ff0'); g.addColorStop(1,'#0f0'); ctx.strokeStyle=g; |
难点：坐标系坐标轴 、单词比较多
3、绘图变形
| ctx.rotate(弧度) //旋转绘图上下文对象（即画笔），轴点是画布的原点 ctx.translate(x,y) //将整个画布的原点平移到指定的点 ctx.sava(); //保存画笔当前的所有变形状态值（游戏中从存盘） ctx.restore(); //恢复画笔变形状态到最近的一次保存（游戏中读取存盘） ctx.save();//先保存原始状态 var deg = 10*Math.PI/180; //要旋转的角度 旋转10度 ctx.rotate(deg); //旋转 ctx.drawImage(img,0,0); //画图 ，画笔是歪的 画什么都是歪的 ctx.restore();// 取出存盘时保存的原始状态 |
（五）SVG绘图
先来了解一下什么是位图和矢量图。简单了解一下就可以。
位图：由一个又一个像素点组成，每个点各有自己的颜色，色彩细腻。 矢量图：由一个又一个线条组成，每个线条可以指定颜色，方向，可以无限缩放，但颜色细节不够丰富
