最近开发一个红包雨活动,就扇形倒计时功能,准备使用 canvas 实现,也就是对 canvas 绘图有了一个基础的了解。这里仅对几个重要概念进行区分
关于 canvas
在绘制中,出现一个坑了我好久的问题,就是 canvas 必须显示使用 width/height 属性设置具体的宽高,而不能使用 css 设置相对宽高,否则绘制会不正常
canvas 角度貌似都是以弧度计(不负责的话)
save & restore
在 canvas 中有这个很重要的概念就是笔触,就表示当前笔绘制的位置,可是有些图形不可能一笔画完,这时候就可以排上用处了,你可以使用 save 保存当前现场,然后你就可以做一些破坏现场的操作了,比如平移、放缩、旋转、错切、裁剪等,就算你整个天翻地覆,日后你可以使用 restore 进行恢复。
moveTo & lineTo
moveTo 可以理解成起点,lineTo 可以理解成终点,常用来绘制一条直线。
注意:这两个并不要求一起出现,还记得笔触的概念,上一次绘制停留的位置,就可以直接做作为起点,此时直接 lineTo 就可以绘制一条直线啦
translate & rotate
这里仅仅是列举两个而已。
translate 移动原点的位置,通常而言,原点在 canvas 画布左上角(0, 0)位置。rotate 以原点重心进行旋转
stroke & fill
绘制的图形有线条和内容,当你规划好图形后,你需要最后调用一下 stroke 函数才能绘制出具体线条。调用 fill 函数填充具体背景等。
stroke 通过 stokeStyle 设置样式, fill 通过 fillStyle 设置样式。lineWidth 设置线条粗细
beginPath & closePath
这两个函数就有点厉害了,把玩了这么久,这两个应该是创建扇形最简单的方式了。分别表示开始路径和封闭路径,canvas会自动将图形封闭起来,这样一来创建扇形就贼简单了,因为不需要自己绘制两条线将图形封闭了。
ctx.beginPath();
//定义起点
ctx.moveTo(100,100);
//以起点为圆心,画一个半径为100的圆弧
ctx.arc(100,100,100,30*Math.PI/180, 60*Math.PI/180);
ctx.closePath();
ctx.stroke();
arc
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数:counterclockwise可选。规定应该逆时针还是顺时针绘图。false = 顺时针,true = 逆时针。
clearRect
可以简单理解成清除画布,在对图形需要多次绘制,来实现动画的时候,需要使用,不然就会是在之前的基础上进行绘制。
clearRect(0, 0, w, h);