addColorStop(stop,color) 方法指定颜色停止，参数使用坐标来描述，停止参数介于 0.0 - 1.0 之间，表示渐变中开始与结束之间的位置。颜色参数规定在结束位置显示的 CSS 颜色值。

　　下面的例子，使用 createLinearGradient() 创建一个线性渐变，并使用渐变填充矩形：

线性渐变); ); ); ); ); grd; );

　　下面的例子，使用 createRadialGradient() 创建一个径向/圆渐变，使用渐变填充矩形：

径向渐变); ); ); ); ); grd; );

　　下面的例子，使用指定的颜色绘制渐变背景：

渐变背景); ); ); ); ); grd; );

　　(7)、Canvas 图像

　　使用 canvas 可以把一幅图像放置到画布上，使用以下方法：

drawImage(img,x,y);

　　drawImage() 方法在画布上绘制图像、画布或视频。该方法方法也能够绘制图像的某些部分，以及或增加或减少图像的尺寸。

　　JS 语法一，在画布上定位图像：

context.drawImage(img,x,y);

　　JS 语法二，在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

　　JS 语法三，剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

　　下表是该方法的参数值：

值 说明

img 规定要使用的图像、画布或视频。

x 在画布上放置图像的 x 坐标位置。

y 在画布上放置图像的 y 坐标位置。

width 可选。要使用的图像的宽度。（伸展或缩小图像）

height 可选。要使用的图像的高度。（伸展或缩小图像）

sx 可选。开始剪切的 x 坐标位置。

sy 可选。开始剪切的 y 坐标位置。

swidth 可选。被剪切图像的宽度。

sheight 可选。被剪切图像的高度。

 

　　下面的例子，使用 JS 把一张图像定位在画布（20,20）处：

绘制图像); ); Image(); ; (){ ); 17 }

　　注意：在使用 JS 绘制图像时，脚步需要位于页面底部，并且必需给该方法添加 onload 事件，指定在文档对象加载完成后触发，否则在 Chrome 下图像不被加载。

　　下图是上面例子在 Chrome 中绘制的图像：

 

　　(8)、Canvas 其他属性和方法

　　　　①、绘制矩形方法

方法 说明

rect() 创建矩形

strokeRect() 绘制矩形（无填充）

fillRect() 绘制“被填充”的矩形

clearRect() 在给定的矩形内清除指定的像素

 

　　　　②、像素的属性和方法

属性 说明

width 返回 ImageData 对象的宽度

height 返回 ImageData 对象的高度

data 返回一个对象，其包含指定的 ImageData 对象的图像数据

方法 说明

createImageData() 创建新的、空白的 ImageData 对象

getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据

putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上

 

　　　　③、转换方法

方法 说明

scale() 缩放当前绘图至更大或更小

rotate() 旋转当前绘图

translate() 重新映射画布上的 (0,0) 位置

transform() 替换绘图的当前转换矩阵

setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

 

　　　　下面的例子，使用 rotate() 方法将矩形旋转 20 度：

旋转绘图); ); ; );

　　注意：旋转只会影响到旋转完成后的绘图。

　　rotate() 方法的参数为旋转角度，以弧度计，如需将角度转换为弧度，需要使用 degrees*Math.PI/180 公式进行计算。比如：需要旋转 10 度，可指定下面的公式：10*Math.PI/180。

　　fillRect() 方法绘制“已填色”的矩形，默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

　　JS 语法如下：

context.fillRect(x,y,width,height);

　　x，y 规定矩形左上角的 x,y 坐标，width/height 属性规定矩形的宽高，以像素计。

　　　　④、合成属性

属性 说明

globalAlpha 设置或返回绘图的当前 alpha 或透明值

globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

 

　　(9)、Canvas 对象

　　Canvas 对象表示一个 HTML 画布元素 <canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。