豆豆狗 发表于 2013-1-4 03:07:09

HTML5 Canvas 提高班(一) —— 光栅图形学(1)中点画圆算法

<div id="cnblogs_post_body">    本系列的随笔在于给大家提供一些难度较深的canvas应用场景,借用数学或物理模型实现效果或性能媲美桌面应用的案例;并且此系将尽可能使用最简明的js代码展示效果。
    推荐使用:chrome、ie9浏览器进行阅读,同时我还在做一个基于canvas的矢量渲染器的类库,希望大家关注。
    话不多说,我们现在开始第一次随笔的内容。
光栅图形学(1)中点画圆算法

    我们平时在使用canvas绘制图形时,通常会调用context的各种API,如设置样式的strokeline、fillcolor等;再如绘制图形的context.arc,context.fillRect等。
    如果我们现在有一个场景,需要绘制1W个以上的图形,并且要求其刷新频率达到12fps以上,也就是说我们必须要在1秒内完成10W次canvasAPI的调用,想想这有多么可怕,大家可以在机子的机器上尝试一下。。得卡到强制关闭浏览器。
    下面我们引入了光栅图形学中的中点画圆算法。
   1.获取context元素的像素数组:

<div class="cnblogs_code">    var cxt= canvas.getContext("2d");    cxt.clearRect(0, 0, width, height);    var data = cxt.getImageData(0, 0,width, height);    imageData = data.data;
页: [1]
查看完整版本: HTML5 Canvas 提高班(一) —— 光栅图形学(1)中点画圆算法