Men的博客

欢迎光临!

0%

canvas学习总结

前端如果想做比较好的特效的话,或者是地图相关的应用的话,学习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()表示恢复最近一次的保存

渐变

文字

阴影