js canvas drawimage

作者：浪子无家发布日期:2025-07-27 浏览:19

// 使用 JavaScript 和 Canvas 绘制图像

// 获取 canvas 元素和其上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 创建一个 Image 对象
const img = new Image();

// 设置图像加载完成后的回调函数
img.onload = function() {
  // 使用 drawImage 方法绘制图像到 canvas 上
  // 参数：图像对象，x 坐标，y 坐标
  ctx.drawImage(img, 0, 0);
};

// 指定图像的来源 URL
img.src = 'https://example.com/image.jpg'; // 替换为实际的图像 URL

// 解释说明：
// 1. 首先获取 canvas 元素及其 2D 绘图上下文。
// 2. 创建一个新的 Image 对象用于加载图像。
// 3. 当图像加载完成后，使用 drawImage 方法将图像绘制到 canvas 上。
// 4. 设置图像的来源 URL，确保替换为实际的图像路径。

上一篇：js translate

下一篇：js display