Canvas 加载图片

Canvas加载图片通常指的是在HTML5中使用Canvas元素来显示一张图片。这通常涉及以下几个步骤：

1. 创建Canvas元素：首先，需要在HTML中创建一个`canvas`元素。

<canvas id="myCanvas" width="200" height="200"></canvas>

2. 获取Canvas上下文：在JavaScript中，使用`getElementById`获取Canvas元素，然后使用`getContext('2d')`方法获取2D渲染上下文。

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

3. 加载图片：使用`new Image()`创建一个新的图片对象，并设置`src`属性为图片资源的URL。同时，需要监听图片的`onload`事件，确保图片加载完成后再进行绘制。

var img = new Image();
img.onload = function() {
    // 图片加载完成后的操作
    ctx.drawImage(img, 0, 0); // 将图片绘制到Canvas上
};
img.src = 'path/to/your/image.jpg';

4. 绘制图片：一旦图片加载完成，就可以使用`drawImage`方法将图片绘制到Canvas上。

需要注意的是，图片的加载是异步的，所以`drawImage`应该在图片的`onload`事件回调函数中调用，以确保图片已经完全加载到内存中。