ask2

Canvas 绘制大量点（40万个）的时候，耗费时间太长怎么解决？？

1970-01-01 08:00发布

站内问答 /
3723 7 4

上面的画布：宽800，高500
我打算绘制： 800 * 500 = 40万个随机坐标的白点
然后 60fps 刷新，做一个 视频加载失败后的动画效果....
结果：就单绘制一次 都会导致浏览器卡一阵子，更不用说动画效果了。

怎么解决？？

    // 绘制点      _drawPoint: function(x , y , r , pointColor){        var startAngle = 0;        var endAngle = getRad(360);        this._ctx.beginPath();        this._ctx.arc(x , y , r , startAngle , endAngle , false);        this._ctx.fillStyle = pointColor;        this._ctx.fill();        this._ctx.closePath();      } ,       _draw: function(){         // 初始化画布         this._setCssStyle();          // 绘制点         var pointNum = this._cavW * this._cavH;         var pointR = 0.5;         var pointFillColor =
发送
7条回答
qq646577619 - 这个人很懒，什么都没留下
1楼 · 2016-10-16 02:55.采纳回答

从这段log可以看到，湖北dns节点出现问题，此时如果有电脑高手，只需要把别的省份的cdn ip，做个host强制解析到hb节点就行了。

bobomao - 这个人很懒，什么都没留下
2楼-- · 2016-10-16 03:05

改成用webgl画, 或者预先生成一段雪花动画直接播

身未动，心已远··· - 这个人很懒，什么都没留下
3楼-- · 2016-10-16 02:57

第一级，控制在15字以内，说明主要问题，比如视频播放失败、网络连接失败，等等。
第二级，把问题log显示出来，因为很多有经验的用户，或者来帮忙解决问题的电脑高手，可以通过log自行排查问题。比如：

@若悲伤化雨☔丿 - 这个人很懒，什么都没留下
4楼-- · 2016-10-16 03:01

2016-10-16 10:10:01 开始连接视频URL解析服务器。
2016-10-16 10:10:02 视频URL解析服务器返回CDN URL [ http://hb.xx.com/yyyy.mp4 ]
2016-10-16 10:10:03 开始连接http://hb.xx.com/yyyy.mp4
2016-10-16 10:10:18 连接超时，1秒后重试。
2016-10-16 10:10:19 开始连接http://hb.xx.com/yyyy.mp4
......

mishen - whatsns产品经理
5楼-- · 2016-10-16 02:55

当计算机系统出现错误时，正确的做法是，分级提示错误信息，而不是搞什么视频创新。

bbjbbj - 这个人很懒，什么都没留下
6楼-- · 2016-10-16 03:06

如果一定要雪花图片，可以试试两张jpg切换，或gif，或100ms的flv，或flash生成。

失去记忆 - 这个人很懒，什么都没留下
7楼-- · 2016-10-16 02:57

实时在canvas上绘制40W个点无论如何都是不现实的。

一周热门 更多>