CanvasRenderingContext2D.drawImage()方法

返回到:Canvas API:CanvasRenderingContext2D

本节课,我们学习CanvasRenderingContext2D.drawImage()方法。

Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种在画布(Canvas)上绘制图像的方式。

语法

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
CanvasRenderingContext2D.drawImage()方法

参数

image

绘制到上下文的元素。允许任何的画布图像源,例如:HTMLImageElementSVGImageElementHTMLVideoElementHTMLCanvasElementImageBitmapOffscreenCanvas 或 VideoFrame

sx 可选

需要绘制到目标上下文中的,image 的矩形(裁剪)选择框的左上角 X 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。

sy 可选

需要绘制到目标上下文中的,image 的矩形(裁剪)选择框的左上角 Y 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。

sWidth 可选

需要绘制到目标上下文中的,image 的矩形(裁剪)选择框的宽度。如果不说明,整个矩形(裁剪)从坐标的 sx 和 sy 开始,到 image 的右下角结束。可以使用 3 参数或 5 参数语法来省略这个参数。使用负值将翻转这个图像。

sHeight 可选

需要绘制到目标上下文中的,image的矩形(裁剪)选择框的高度。使用负值将翻转这个图像。dx

image 的左上角在目标画布上 X 轴坐标。

dy

image 的左上角在目标画布上 Y 轴坐标。

dWidth

image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明,在绘制时 image 宽度不会缩放。注意,这个参数不包含在 3 参数语法中。

dHeight

image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。如果不说明,在绘制时 image 高度不会缩放。注意,这个参数不包含在 3 参数语法中。

返回值

无(undefined)。

异常

InvalidStateErrorDOMException

当图像没有数据或者画布或源矩形宽度/高度为零时抛出该异常。TypeMismatchErrorDOMException

当将 null 或 undefined 值作为图像的参数传入时抛出该异常。

示例

在画布上绘制图像

此示例在画布中使用 drawImage() 方法绘制一张图像。

HTML

<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source"
       src="rhino.jpg"
       width="300" height="227">
</div>

JavaScript

原图像从坐标 (33,71) 处截取一个宽度为 104 高度为 124 的图像。并将其绘制到画布的 (21, 20) 坐标处,并将其缩放为宽 87、高 104 的图像。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');

image.addEventListener('load', (e) => {
  ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
});

理解源元素大小

drawImage() 方法在绘制时使用源元素的固有尺寸(以 CSS 像素为单位)。

例如,如果加载图像并在其构造函数中指定可选的大小参数,则必须使用所创建实例的 naturalWidth 和 naturalHeight 属性来正确计算裁剪和缩放区域等内容,而不是 element.width 和 element.height。如果元素是 <video> 元素,则 videoWidth 和 videoHeight 也是如此,依此类推。

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const image = new Image(60, 45); // Using optional size for image
image.onload = drawImageActualSize; // Draw when image has loaded

// Load an image of intrinsic size 300x227 in CSS pixels
image.src = 'rhino.jpg';

function drawImageActualSize() {
  // Use the intrinsic size of image in CSS pixels for the canvas element
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;

  // Will draw the image as 300x227, ignoring the custom size of 60x45
  // given in the constructor
  ctx.drawImage(this, 0, 0);

  // To use the custom size we'll have to specify the scale parameters
  // using the element's width and height properties - lets draw one
  // on top in the corner:
  ctx.drawImage(this, 0, 0, this.width, this.height);
}

返回到:Canvas API:CanvasRenderingContext2D

作者:terry,如若转载,请注明出处:https://www.web176.com/canvas_api/8105.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2023年1月8日
下一篇 2023年1月8日

相关推荐

发表回复

登录后才能评论