Cosimo

摘要： context.fillText("www.naokr.com",canvas.width/2,120); 阅读全文

摘要： context.quadraticCurveTo(canvas.width/2,-50,canvas.width-100,canvas.height-50);实例为 Canvas 二次曲线的应用前面已经简单介绍过用法。 阅读全文

摘要： radius+=0.75; angle+=(Math.PI*2)/50; var x=canvas.width/2+radius*Math.cos(angle); var y=canvas.height/2+radius*Math.sin(angle); 阅读全文

摘要： var zigzagSpacing = 60;//锯齿间距 阅读全文

摘要： 【transform(m11, m12, m21, m22, dx, dy) 该方法是允许直接对变形矩阵作修改。】 阅读全文

摘要： 【rotate 方法，它用于以原点为中心旋转 canvas。该方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。上面的例子用到了两层循环。第一层循环决定环的数量，第二层循环决定每环有多少个点。每环开始之前，都保存一下 canvas 的状态，这样恢复起来方便。每次画圆点，以一定夹角来旋转 canvas，而这个夹角则是由环上的圆点数目的决定的。最里层的环有 6 个圆点，这样，每次旋转的夹角就是 360/6 = 60 度。往外每一环的圆点数目是里面一环的 2 倍，那么每次旋转的夹角随之减半。】 阅读全文

摘要： 【translate 方法用来移动 canvas 和它的原点到一个不同的位置。translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量。实例中显示出移动 canvas 原点的好处。我们创建了一个 drawSpirograph 方法用来绘制螺旋（spirograph）图案，图案是围绕原点绘制出来的。如果不使用 translate 方法，那么只能看见其中的四分之一。translate 可以帮助我们任意放置这些图案，而不需要在 spirograph 方法中手工调整坐标值，既好理解也方便使用。实例在 draw 方法中调用 drawSpirograph 方法 9 次，用了 2 层循环。每一次循环，先移动 canvas ，画螺旋图案，然后恢复早原始状态。】【在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。】 阅读全文

摘要： 【通过绘制多个矩形的例子来描述 canvas 的状态堆的工作原理。首先是用默认设置画一个大四方形，然后保存一下状态。改变填充颜色画第二个小一点的蓝色四方形，然后再保存一下状态。再次改变填充颜色绘制更小一点的半透明的白色四方形。到目前为止所做的动作和前面章节的都很类似。不过一旦调用 restore，状态堆中最后的状态会弹出，并恢复所有设置。如果不是之前用 save 保存了状态，那么我们就需要手动改变设置来回到前一个状态，这个对于两三个属性的时候还是适用的，一旦多了，工作量猛涨。当第二次调用 restore 时，已经恢复到最初的状态，因此最后是再一次绘制出一个黑色的四方形。】 阅读全文

摘要： save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。 阅读全文

摘要： 【图案 Patterns 方法。createPattern(image,type) 该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可。注意:与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。实例中创建一个图案然后赋给了 fillStyle 属性。值得一提的是，使用 Image 对象的 onload handler 来确保设置图案之前图像已经装载完毕。】 阅读全文

摘要： 【shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是 0。shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，默认是全透明的黑色。】 阅读全文

摘要： 【createRadialGradient(x1,y1,r1,x2,y2,r2)，方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。实例中定义了 4 个不同的径向渐变。由于可以控制渐变的起始与结束点，所以可以实现一些比（如在 Photoshop 中所见的）经典的径向渐变更为复杂的效果。经典的径向渐变是只有一个中心点，简单地由中心点向外围的圆形扩张。此例中起点稍微偏离终点，这样可以达到一种球状 3D 效果。但最好不要让里圆与外圆部分交叠。4 个径向渐变效果的最后一个色标都是透明色。如果想要两色标直接的过渡柔和一些，只要两个颜色值一致就可以了。代码里面看不出来，是因为我用了两种不同的颜色表示方法，但其实是相同的，#019F62 = rgba(1,159,98,1)。】 阅读全文

摘要： 【使用线性渐变来填充、描边。新建一个 canvasGradient 对象，并且赋给图形的 fillStyle 或 strokeStyle 属性。createLinearGradient(x1,y1,x2,y2)，方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。创建出 canvasGradient 对象后，使用 addColorStop 方法上色。addColorStop(position, color) ，方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值。】 【实例展示了两种不同的渐变。第一种是背景色渐变，同一位置设置了两种颜色，也可以用这来实现突变的效果，就像这里从白色到绿色的突变。一般情况下，色标的定义是无所谓顺序的，但是色标位置重复时，顺序就变得非常重要了。所以，保持色标定义顺序和它理想的顺序一致，结果应该没什么大问题。第二种渐变，并没有从 0.0 位置开始定义色标，因为那并不是那么严格的。 阅读全文

摘要： 【lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel 和 miter。默认是 miter。同样，绘制三条折线做例子，分别设置不同的 lineJoin 值。最上面一条是 round 的效果，边角处被磨圆了，圆的半径等于线宽一半。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候，线段会在连接处外侧延伸直至交于一点，延伸效果受 miterLimit 属性的制约。】 阅读全文

摘要： 【lineCap 的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt，round 和 square。默认是 butt。实例绘制了三条直线，分别赋予不同的 lineCap 值。还有两条辅助线，为了可以看得更清楚它们之间的区别，三条线的起点终点都落在辅助线上。最左边的线用了默认的 butt 。可以注意到它是与辅助线齐平的。中间的是 round 的效果，端点处加上了半径为一半线宽的半圆。右边的是 square 的效果，端点出加上了等宽且高度为一半线宽的方块。】 阅读全文