Cosimo

摘要： 【lineWidth 该属性是定义线条粗细的。线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。实例中，用递增的宽度绘制了10条直线。最左边的线宽1.0单位。并且，最左边的以及所有宽度为奇数的线并不能精确呈现，这就是因为路径的定位问题。】 阅读全文

摘要： 【rgba() 方法与 rgb() 方法类似，多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。相对于 globalAlpha ，rgba() 可以分别设置轮廓和填充样式，因而具有更好的可操作性和使用弹性。】 阅读全文

摘要： 【通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。】 阅读全文

摘要： 【与上一个实例类似，不过这次用的是 strokeStyle 属性，而且画的不是方格，而是用 arc 方法来画圆。】 阅读全文

摘要： 【给绘制的图形上色，需要借助两个重要的属性 fillStyle 和 strokeStyle 。fillStyle = color strokeStyle = color 。其中 fillStyle 用于设置填充颜色，strokeStyle 用于设置图形轮廓的颜色。实例中用两层 for循环来绘制方格阵列，每个方格不同的颜色。如上图。使用两个变量 i 和 j 来为每一个方格产生唯一的 RGB 色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。可以通过修改这些颜色通道的值来产生各种各样的色板。】 阅读全文

摘要： 【drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。实例中用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单，只需要循环铺开经过缩放的图片即可。第一层 for 循环是做行重复，第二层是做列重复的。图像大小被缩放至原来的三分之一。这种方法可以用来很好的达到背景图案的效果。】 阅读全文

摘要： 【用到的函数 drawImage(image, x, y) 其中，括号内 image 是 image 图片或者 canvas 对象。x，y 是其在目标 canvas 中的坐标。本实例中，调用一个外部图像作为一线性图的背景。用背景图就不需要绘制负责的背景，省下不少代码。这里只用到一个 image 对象，于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角 (0,0) 处。红色折线部分使用前面讲的方法绘制的。】 阅读全文

摘要： 【利用曲线函数绘制心形。】 阅读全文

摘要： 【二次方曲线：quadraticCurveTo(cp1x, cp1y, x, y) ，参数 x 和 y 是终点坐标，cp1x 和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。】 阅读全文

摘要： 【弧线 Arcs用 arc方法来绘制弧线或圆。arc(x, y, radius, startAngle, endAngle, anticlockwise) 。方法接受五个参数：x，y 是圆心坐标，radius 是半径，startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准），anticlockwise 为 true 表示逆时针，反之顺时针。注意：arc 方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees;。此示例比之前见到过的要复杂一些，画了12个不同的弧形，有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形，那会是一大段的代码，而且，画每一个弧形时我都需要知道其圆心位置。像我这里画 90，180 和 270 度的弧形看起来不是很麻烦，但是如果图形更复杂一些,则实现起来会越来越困难。这里使用两个 for 循环来画多行多列的弧形。每一个弧形都用 beginPath 方法创建一个新路径。然后为了方便阅读和理解，我把所有参数都写成变量形式。显而易见，x 和 y 作 阅读全文

摘要： 【路径实例2，绘制三角形。lineTo(x,y)的用法，lineTo 接受的终点坐标(x，y)作为参数，起始坐标取决于前一路径，前一路径的终点即当前路径的起点。起始坐标也可以用moveTo()方法来设定（本实例就是）。需要注意的一点是，fill 和stroke 在绘制三角形时的不同。使用 fill 路径直接填充闭合。使用 stroke 需要调用 closePath 闭合路径。不然只会绘制两条直线。】 阅读全文

摘要： 【实例演示Canvas绘制路径，绘制路径和绘制矩形是不同的。首先要使用函数beginPath()创建一个路径，第二使用绘制函数绘制，第三闭合路径，最后调用stroke()或fill()方法，实际完成绘制。实例当中主要用到moveTo()函数，此方法是将绘制起点从某个点移动到另一个点，绘制不连续的路径经常用到。】 阅读全文

摘要： 【实例展示了三个绘制矩形的函数。分别是：fillRect(x,y,width,height) :绘制一个填充的矩。clearRect(x,y,width,height) : 清除指定的矩形区域，并使其完全明。strokeRect(x,y,width,height) : 绘制一个矩形轮廓。函数参数x、y代表矩形左上角的坐标，width、height代表矩形的宽和高。】 阅读全文

摘要： 【实例绘制两个部分重叠交错的矩形，其中一个是有alpha透明效果。】 阅读全文

摘要： 作为程序员，面临着多种技术趋势并存以及逐步被替代的现状，比如HTML5将会代替Flash，Android占据移动开发的半壁江山等，那么程 序员如何从中选择优势的技术，从而不会在技术大潮中被淘汰成为了重中之重，今天给广大的程序员介绍一些必须要了解的技术以及，如何从整体看待这些技术趋势。 阅读全文