设置网站默认首页,企业网站建设服务,医药网站设计,网址最全的浏览器首先你得知道canvas的基础语法#xff0c;此处不过多赘述.
一、如何更新视图
canvas里面有个clearRect方法#xff0c;可以遮住画布中一个矩形部分. 但是你想这样做就难免会遮住一些本不该遮住的东西#xff0c;因为它是一个矩形#xff0c;并且你还要计算它的位置和尺寸…首先你得知道canvas的基础语法此处不过多赘述.
一、如何更新视图
canvas里面有个clearRect方法可以遮住画布中一个矩形部分. 但是你想这样做就难免会遮住一些本不该遮住的东西因为它是一个矩形并且你还要计算它的位置和尺寸实时的哦这蛮费劲的我以前写过一个降雪效果就用的这种思路最后做出来了但是计算压力也很大效果上经常遮住过多的部分. 后面我想到一个思路他其实来自于threejs这个库写的东西每帧都更新屏幕里的所有视图根据你的数据全部重画一次.我就想我能不能只去维护数据更新视图就只用一个方法根据当前数据全部重画canvas的性能挺好的不用担心画多了卡顿因为里面进行的毕竟不是DOM操作而JavaScript又很擅长处理数据.我就直接写了一个用于更新的方法一个巨大的clearRect结合setInterval和requestAnimationFrame直接在每次屏幕刷新时覆盖所有然后根据新的数据重新画一遍. 那种结合参考用setInterval与requestAnimationFrame做节流 效果很好不用考虑遮挡的问题维护数据就好了绘制可以写一些函数每帧把最新的数据给函数去画.
二、如何控制样式与填充
然后可能还会有一些样式和填充上的问题可以有两种方法去解决. 第一种填充和样式都只针对一段路径写的规整一点每次beginPath之后closePath再规定填充然后你就发现这个填充只影响上面这段路径样式是不是这样我还没试过.
因为我的代码只用到几个颜色而初期我又没发现上面这个特性所以我用了别的方法来控制颜色也就是第二种方法.
第二种引入图层的概念这样也可以做出遮挡效果就是多个canvas元素多个上下文我在不同上下文里使用不同的颜色至于上下文之间的交互就是数据上的事情了我们用的那种全部重绘的方法每次都重绘全部的上下文在更新前把数据准备好.
