保护和恢复状态 canvas Your browser doesn't support the canvas element SaveRestore); ); grad.addColorStop(); grad.addColorStop(); grad.addColorStop(); ]; ; ctx.fillStyle = colors[cIndex]; draw(); ); ){ buttons[i].onclick = handleButtonPress; } function handleButtonPress(e){ switch (e.target.innerHTML){ : ctx.save(); cIndex colors.length; ctx.fillStyle = colors[cIndex]; draw(); break; : cIndex ); ctx.restore(); draw(); break; } } function draw(){ ctx.fillRect(); }

此例中，定义了一个包含CSS颜色名的数组和一个线性渐变。当Save（保存）按钮被按下就会用save方法保存当前的绘制状态。当Restore（恢复）按钮被按下，之前的绘制状态就会被恢复。无论哪个按钮被按下都会调用draw 函数，它会用 fillRect 方法绘制一个实心矩形。fillStyle属性会在数组里来回移动，并在按钮被点击时进行保存和恢复，因为这个属性是绘制状态的一部分。此例的显示效果如下：

画布里的内容不会被保存和恢复，只有绘制状态的属性值才会，例如lineWidth、fillStyle、strokeStyle等。

6. 绘制图像

可以用drawImage方法在画布上绘制图像。这个方法需要三个、五个或九个参数。第一个参数始终是图像的来源，它可以是代表img、video或其他canvas元素的DOM对象。下面的例子使用了个img元素作为来源：

使用drawImage方法 canvas Your browser doesn't support the canvas element ); ); ); ctx.drawImage(imageElement,); ctx.drawImage(imageElement,);

使用三个参数时，第二个和第三个参数给出了图像应当在画布上绘制的坐标。图像按照它原始的宽度和高度进行绘制。使用五个参数时，额外的参数指定了应当给图像绘制的宽度和高度，以代替原始尺寸。

使用九个参数时：

* 第二个和第三个参数是在源图像内的偏移量；

* 第四个和第五个参数是在源图像所需使用区域的宽度和高度；

* 第六个和第七个参数指定了所选区域的左上角将要在画布上绘制的坐标；

* 第八个和第九个参数指定了所选区域将要绘制的宽度和高度。

此例的显示效果如下：

6.1 使用视频图像

我们可以用video元素作为drawImage方法的图像来源。这么做其实是对视频做了截图。

使用视频作为drawImage方法的来源 canvas Video cannot be displayed Your browser doesn't support the canvas element Press Me); ); document.getElementById((){ ctx.drawImage(imageElement,); }

此例中有一个video元素、一个button和一个canvas元素。按下按钮后，当前的视频帧会被drawImage方法用来描绘桌面。此例的显示效果如下：

观看各种HTML5演示时，经常会见到canvas被用来在视频上绘图。这就是此例展示的技巧，再加上一个计时器实现的。下面的例子展示了怎样结合使用它们。

用canvas显示视频并在上面绘图 canvas width Video cannot be displayed Your browser doesn't support the canvas element ); ); ; ; ctx.lineWidth = 5; ctx.strokeStyle ; setInterval(function(){ ctx.drawImage(imageElement,); ctx.strokeRect(),width,height); },25); setInterval(function(){ width ; height ; },100)

此例中，给一个video元素应用了hidden元素，使它对用户不可见。这里用了两个计时器：第一个每25毫秒触发一次，它会绘制当前的视频帧并添上一个空心的矩形。第二个计时器没100毫秒触发一次，它会改变矩形所使用的值。实现的效果是矩形会改变大小，并且叠加在视频图像上。此例显示效果如下：

像这样操作video元素时无法使用内置控件。这里为了让示例保持简单而使用了autoplay属性，但更有用的解决方式是实现自定义控件。

6.2 使用画布图像

我们可以将一张画布的内容作为另一张里drawImage方法的来源，如下例所示：