前端如果想做比较好的特效的话,或者是地图相关的应用的话,学习canvas是非常有必要的,我个人感觉canvas跟OpenGL很相似,都是状态管理的机制
常见的接口有
样式
ctx.strokeStyle = “red”; //线的颜色
ctx.fillStyle = “blue”; //准备填充的颜色
绘制
ctx.beginPath(); //声明要开始绘制路径
ctx.closePath(); //闭合路径(自动补全)
ctx.moveTo(100,100); //移动到绘制点,将“画笔”移动到100,100的位置
ctx.lineTo(250,250); //划线
ctx.arc(圆心x, 圆心y, 半径, 开始的弧度, 结束的弧度, 是否逆时针);
ctx.drawImage(image, 100, 100); //表示x和y坐标
ctx.drawImage(img图片对象,画布X,画布Y);
ctx.drawImage(img,切片X,切片Y,切片W,切片H,画布X,画布Y,图片W,图片H);
显示填充
ctx.stroke(); //显示线(绘制线),可以绘制的路径显示出来
ctx.fill(); //填充颜色
ctx.fillRect(x,y,w,h); //绘制填充矩形
ctx.strokeRect(x,y,w,h); //绘制路径矩形
画布的变形
translate()移动画布,
rotate()旋转画布
transfrom()
ctx.save()表示保存上下文的物理性质,
ctx.restore()表示恢复最近一次的保存