html canvas心得

挖一些使用过程中的坑

画布,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的\光影效果\复杂的动画\视频.