Minakata的博客

摘要： 贝塞尔和二次方曲线Bezier and quadratic curves接下来要介绍的路径是贝塞尔曲线，它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)上面两行代码的区别见右图。它们都有一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而三次方贝塞尔曲线有两个。参数 x 和 y 是终点坐标，cp1x 和 cp 阅读全文

摘要： 网格 the grid在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的 HTML模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认网格，如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和 距上边Y像素（坐标(x, y)）。后面的教程中我们将学会如何把移动原点，旋转以及缩放网格。不过现在我们会使用默认的状态。绘制图形 drawing shapesca 阅读全文

摘要： 让我们从<canvas>元素的定义开始吧。<canvas id="myCanvas" width="150" height="150"></canvas><canvas>看起来很像<img>，唯一不同就是它不含src和alt属性。它只有两个属性，width和height，两个都是可选的，并且都可以用DOM或者CSS来设置。如果不指定width 和 height，默认的是宽300像素，高150像素。虽然可以通过 CSS来调整canvas的大小，但渲染图像会缩放来适应布局的（如果 阅读全文