canvas getContext对象方法和属性详细介绍(7)_H5之家

28.drawImage 画图，引用方式有以下三种：

drawImage(image, x, y) drawImage(image, x, y, width, height) drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

参数描述

image

所要绘制的图像。

这必须是表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。

x, y 要绘制的图像的左上角的位置。

width, height 图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。

sourceX, sourceY 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。

sourceWidth, sourceHeight 图像所要绘制区域的大小，用图像像素表示。

destX, destY 所要绘制的图像区域的左上角的画布坐标。

destWidth, destHeight 图像区域所要绘制的画布大小。

例子如下：

<html> <head> <title>Canvas drawImage example 1</title> <meta name="DC.creator" content="Kamiel Martinet, "> <meta name="DC.publisher" content="Mozilla Developer Center, "> <script type="application/x-javascript"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'https://developer.mozilla.org/samples/canvas-tutorial/images/backdrop.png'; img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } } </script> <style type="text/css"> body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;} h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; } h2 { font-size: 100%; color: #036; } canvas { float: left; margin-right: 20px; margin-bottom: 20px; } pre { float:left; display:block; background=\'#\'" border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; } </style> </head> <body <h1>Canvas <code>drawImage</code> example 1</h1> <div> <canvas id="canvas" width="180" height="130"></canvas> <pre> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'https://developer.mozilla.org/samples/canvas-tutorial/images/backdrop.png'; img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } } </pre> <div style="float:left;"> <h2>Source image</h2> <img src="images/backdrop.png"/> </div> </div> </body> </html>

来源：

2012-11-17网络