挖一些使用过程中的坑
画布,canvas,可以理解为小时候玩的粘贴纸,我们先需要画出"无形"的路径,如rect/arc/lineTo,再通过fill/stroke渲染成可见的图形显示到屏幕上.无形或可见的路径\内容绘制之后,再去修改画布,只会影响到后面绘制的内容.
转换的各类操作,只对其后的绘制(包括路径和渲染)起作用.对之前已经绘制的路径\渲染过的无效.
beginPath,会重置前面绘制的路径,是不是叫clearAndRestartPath更清晰些?
moveTo,并不是字面意义的移动"画笔",而应理解为跳到某点再去画.它不会生成路径.是不是叫jumpTo更准确些?
closePath,并不是某些文章里提到的是必须要用的.close此处的意思,是"闭合",会创建从路径尾点到开始点的路径的.
别忘了对save restore的使用,结合对画布的各类转换操作.
画布是以(0,0)为原点进行rotate的,注意要画的img的旋转原点,可以用photoshop找出来.
setTransform(1, 0, 0, 1, 0, 0),可以实现对转换操作的重置,注意参数.
矩形框是否为空
碰撞
圆
圆的碰撞判断很简单,2个圆的圆心距离是否小于2圆的半径之和.
矩形
矩形的碰撞判断,如下图:
不规则
不规则的图像,一般源自img.
具体操作,是在上面矩形碰撞为true的情况下,再进一步判断重叠的矩形框里,在绘制1张img,和2张img的情况下,检查每一个像素的alpha值有无变化.
遗留问题
canvas似乎无法对局部的图案或单独的路径\绘制留下可溯源操作的方式.是否自己弄一套API出来?
transform() setTransform() 的参数,特别是b和c,不太明白适用场景.
canvas的所有api,都搞清楚了,也只是相当于学会了用笔.真正要画出什么样的图,就是一般人和画家的区别.要学的无穷多.比如3D的\光影效果\复杂的动画\视频.
