HTML5 Canvas 提供了将图片绘制在画布上，它能够绘制图像的某些部分，以及增加或减少图像的尺寸。

绘图方式

// 在画布的(x, y)绘制图片
context.drawImage(img, x, y);

// 在画布的(x, y)绘制图片，并设置宽高
context.drawImage(img, x, y, width, height);

// 剪切图像，并在画布的(x, y)绘制图片
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

// 参数
// img:规定要使用的图像、画布或视频。
// sx:可选。开始剪切的 x 坐标位置。
// sy:可选。开始剪切的 y 坐标位置。
// swidth:可选。被剪切图像的宽度。
// sheight:可选。被剪切图像的高度。
// x:在画布上放置图像的 x 坐标位置。
// y:在画布上放置图像的 y 坐标位置。
// width:可选。要使用的图像的宽度。（伸展或缩小图像）
// height:可选。要使用的图像的高度。（伸展或缩小图像）

当我们使用 stroke 方法绘制出线条前，也可以通过一些方法来控制线条的样式。

具体设置参数：

// 设置或返回线条的结束端点样式
// butt:默认。向线条的每个末端添加平直的边缘。
// round:向线条的每个末端添加圆形线帽。
// square:向线条的每个末端添加正方形线帽。
context.lineCap="butt|round|square";

// 设置或返回两条线相交时，所创建的拐角类型
// bevel:创建斜角。
// round:创建圆角。
// miter:默认。创建尖角。
context.lineJoin="bevel|round|miter";

// 设置或返回当前的线条宽度
// number:当前线条的宽度，以像素计。
context.lineWidth=number;

// 设置或返回最大斜接长度
// number:正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。
context.miterLimit=number;

通过创建一个gradient对象，在绘制图形前赋值于上下文（context）中，从而达到颜色渐变效果，渐变效果可用于填充矩形、圆形、线条、文本等等。

HTML5 Canvas 中的渐变分为线性渐变和径向渐变（也被称之为扩散性渐变）。相关方法：

// 创建线性渐变
// x0:渐变开始点的 x 坐标
// y0:渐变开始点的 y 坐标
// x1:渐变结束点的 x 坐标
// y1:渐变结束点的 y 坐标
context.createLinearGradient(x0,y0,x1,y1);

// 创建径向渐变
// 渐变的开始圆的 x 坐标
// 渐变的开始圆的 y 坐标
// 开始圆的半径
// 渐变的结束圆的 x 坐标
// 渐变的结束圆的 y 坐标
// 结束圆的半径
context.createRadialGradient(x0,y0,r0,x1,y1,r1);

// 增加规定渐变对象中的颜色和停止位置
// stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
// color:在结束位置显示的 css 颜色值
gradient.addColorStop(stop, color);

createLinearGradient 和 createRadialGradient 创建出的 gradient 对象必须使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

之前介绍绘制的文章中，在绘制路径和填充路径时只用到了默认的颜色（黑色）。​

如果想要给图形上色，有两个重要的属性可以做到。

// 设置或返回用于填充绘画的颜色、渐变或模式。
// color:指示绘图填充色的 CSS 颜色值。默认值是 #000000。
// gradient:用于填充绘图的渐变对象（线性或放射性）
// pattern:用于填充绘图的 pattern 对象
context.fillStyle=color|gradient|pattern;

// 设置或返回用于笔触的颜色、渐变或模式。
// color:指示绘图填充色的 CSS 颜色值。默认值是 #000000。
// gradient:用于填充绘图的渐变对象（线性或放射性）
// pattern:用于填充绘图的 pattern 对象
context.strokeStyle=color|gradient|pattern;

// 以 color 作为填充有多种形式：

// 1. 使用颜色字符串填充
context.fillStyle = "red";

// 2. 使用十六进制数字字符串填充
context.fillStyle = "#FF0000";

// 3. 使用十六进制数字字符串简写形式填充
context.fillStyle = "#F00";

// 4. 使用 RGB 色彩模式设置颜色
context.fillStyle = "rgb(255,0,0)";

// 5. 使用 RGBA 色彩模式设置颜色，它是在 RGB 色彩模式的基础上多了控制 alpha 透明度的参数，取值范围在 1（不透明）~ 0（透明）之间。
context.fillStyle = "rgba(255,0,0,1)";

// 6. 使用 HSL 色彩模式设置颜色，它是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。 HSL 即是代表色相（H），饱和度（S），明度（L）三个通道的颜色。
context.fillStyle = "hsl(0,100%,50%)";

// 7. 使用 HSLA 色彩模式设置颜色，它是在 HSL 色彩模式的基础上多了控制 alpha 透明度的参数，取值范围在 1（不透明）~ 0（透明）之间。
context.fillStyle = "hsla(0,100%,50%,1)";

HTML5 Canvas 提供了两种方法来渲染文本 。

相关方法：

// 在指定的(x,y)位置填充指定的文本
// text:规定在画布上输出的文本。
// x:开始绘制文本的 x 坐标位置（相对于画布）。
// y:开始绘制文本的 y 坐标位置（相对于画布）。
// maxWidth:可选。允许的最大文本宽度，以像素计。
context.fillText(text, x, y, maxWidth);

// 在指定的(x,y)位置绘制文本边框
// text:规定在画布上输出的文本。
// x:开始绘制文本的 x 坐标位置（相对于画布）。
// y:开始绘制文本的 y 坐标位置（相对于画布）。
// maxWidth:可选。允许的最大文本宽度，以像素计。
context.strokeText(text, x, y, maxWidth);