海口仿站定制模板建站html5网站带后台

首先你得知道canvas的基础语法，此处不过多赘述.

一、如何更新视图

canvas里面有个clearRect方法，可以遮住画布中一个矩形部分.
但是你想这样做就难免会遮住一些本不该遮住的东西，因为它是一个矩形，并且你还要计算它的位置和尺寸，实时的哦，这蛮费劲的，我以前写过一个降雪效果就用的这种思路，最后做出来了，但是计算压力也很大，效果上经常遮住过多的部分.
后面我想到一个思路，他其实来自于threejs，这个库写的东西每帧都更新屏幕里的所有视图，根据你的数据，全部重画一次.我就想，我能不能只去维护数据，更新视图就只用一个方法，根据当前数据全部重画？canvas的性能挺好的，不用担心画多了卡顿，因为里面进行的毕竟不是DOM操作，而JavaScript又很擅长处理数据.我就直接写了一个用于更新的方法，一个巨大的clearRect，结合setInterval和requestAnimationFrame直接在每次屏幕刷新时覆盖所有，然后根据新的数据重新画一遍.
那种"结合"参考：用setInterval与requestAnimationFrame做节流
效果很好，不用考虑遮挡的问题，维护数据就好了，绘制可以写一些函数，每帧把最新的数据给函数去画.

二、如何控制样式与填充

然后可能还会有一些样式和填充上的问题，可以有两种方法去解决.
第一种，填充和样式都只针对一段路径，写的规整一点，每次beginPath之后closePath，再规定填充，然后你就发现这个填充只影响上面这段路径，样式是不是这样我还没试过.

因为我的代码只用到几个颜色，而初期我又没发现上面这个特性，所以我用了别的方法来控制颜色，也就是第二种方法.

第二种，引入图层的概念（这样也可以做出遮挡效果），就是多个canvas元素，多个上下文，我在不同上下文里使用不同的颜色，至于上下文之间的交互就是数据上的事情了，我们用的那种全部重绘的方法，每次都重绘全部的上下文，在更新前把数据准备好.