摘要：CSS3 transition效果 360度旋转 旋转放大 放大 移动 阅读全文

摘要：css3背景图水平垂直顺时针逆时针翻转旋转 阅读全文

摘要：盒模型阴影box-shadow。下面是一个使用多参数的例子：用CSS3创建一个阴影的mixin，需要传递水平和垂的偏移量，模糊的范围，还有颜色，4个参数： 阅读全文

摘要：JavaScript Html5 简单的贪吃蛇游戏。 阅读全文

摘要：实例来自网络，作者简单修改。页面采用了一部分html5 css3 的新特性。如，html5当中的 header footer section 等新标签。css3 当中的圆角属性，旋转属性。 阅读全文

摘要：canvas 线性渐变填充简单实例。 阅读全文

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

摘要：HTML5 Canvas 绘制树，每次刷新，树的形状都会变的。本实例来自网络。 阅读全文

摘要：绘制齿轮实例，为 canvas 绘图的一个综合应用。用到的知识包括，绘制圆形，线性渐变，lineJoin等。 阅读全文

摘要：context.globalAlpha=0.5; context.beginPath(); context.arc(canvas.width/2,canvas.height/2,70,0,2*Math.PI,false); context.fillStyle="red"; context.fill(); 阅读全文

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

摘要：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 方法，当前的状态就会被推入堆中保存起来。 阅读全文

摘要：【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)。】 阅读全文