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;