一直以来都没有对Canvas进行深入的学习，工作中的项目也基本上没有涉及到Canvas的技术知识，所以这次前端小组选择研究方向，就选择了Canvas作为其中的一个方向。
我的主要学习途径是学习了慕课网站的视频教程，并且实现了一些小的例子。附上教程地址：http://www.imooc.com/learn/185（Canvas绘图详解）
下个阶段学习重点就是实现以下倒计时的代码示例。
下面是我总结的第一阶段的一些学习笔记：
创建Canvas画布
- HTML
<canvas id="myCanvas"></canvas> - Javascript
var canvas = document.getElementById("myCanvas") var context = canvas.getContext("2d") //使用context进行绘制
在JS中，可以通过canvas.width和canvas.height来设置画布的宽度和高度，注意不要加单位。 - 时刻谨记canvas的绘制机制是基于状态的
线条的绘制
-
moveTo(x,y)挪动到某坐标 -
lineTo(x,y)绘制线条状态 -
beginPath()声明路径的开始 -
closePath()声明路径的结束，会绘制一个封闭的路径 -
lineWidth设置线条的宽度 -
strokeStyle设置线条的样式 -
fillStyle设置封闭图形的填充样式 -
stroke()绘制线条或者封闭图形的外边框 -
fill()对封闭图形进行填充 -
rect(x,y,width,height)
fillRect(x,y,width.height)
strokeRect(x,y,width.height)
直接可以调用的矩形绘制方法
图形变换
-
save()restore()一般成对出现，用来保存和恢复绘图状态 -
translate(x,y)retate(deg)scale(sx,sy)最基础的图形变换，位移旋转和缩放 -
transform(a,b,c,d,e,f)setTransform(a,b,c,d,e,f)图形变换矩阵相关知识
曲线的绘制
-
arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)arcTo(x1,y1,x2,y2,radius)圆弧的绘制 默认为顺时针
文字的渲染
-
font="bold 40px Arial"和css写法一致 -
fillText(string,x,y,[maxlen])绘制文字 -
strokeText(string,x,y,[maxlen])绘制文字边框 -
textAlign设置文本对齐方式 -
textBaseline垂直方向对齐样式 -
measureText(string).width获取本文的绘制宽度
高级内容
-
shadowColor shadowOffsetX shadowOffsetY shadowBlur阴影的绘制
-globalAlpha globalCompositeOperation设置全局透明度和绘制图形遮挡时11中可能的处理方法，这个就是完成canvas擦除效果的关键，原理就是重复时从旧图形中挖去新图形，也就是透明(destination-out)。 -
clip()剪辑区域，可以完成探照灯的小例子。
网友评论