canvas–路径与画布状态

这周开始了canvas的初步学习,发现canvas里有两个很尴尬的方法:beginPath() — closePath();

看名字是一对对应的控制路径的方法,但是去官网上看,它俩压根一点关系都没有!!!??

canvas中beginPath()是开始描绘路径,这之后的fill()或者stroke()方法使用时都会往上追溯到beginPath()的地方,比如我先画一条线,描成黑色,再画一条线,描成红色,这时候第一条线也还会红,所以它黑-红相加了。那如何打断这种联系呢,并不是closePath(),而是重新beginPath()…

closePath()事实上用法和它的名字是一致的,创建当前点到起始点的路径,在PS里这个操作之后路径就闭合了,在canvas里这个路径也是闭合了,但是并没有结束这个路径,继续画新的形状后,再填充或者是描绘,还是会追溯到beginPath()。

所以beginPath()理解为newPath(),这个思路就顺了。

再来说画布状态,当画布进行旋转、缩放等操作时,这个改变了的状态是可以被保存和还原的,这对方法是:save()和restore()。

看名字是一对,事实上他们也确实是一对名正言顺的方法对,不是所有的命名都和Path()那样瞎来。

save()方法可以多次叠加使用,每次restore()会返回到上一次save()的状态。而且restore()对应不到save()会有报错,反之,save()不需要对应restore()。

restore()的操作会还原画布的状态,但是不会还原画布里面已经有的元素状态,所以还是可以放心大胆的瞎画。

let’s canvas。

发表评论