canvas显示图片

要在canvas上显示图片，可以按照以下步骤进行操作。首先，获取canvas画布，并获得画布的上下文。然后，创建一个image元素，并使用src属性设置图片的地址。接下来，在image元素的onload事件回调函数中，使用上下文的drawImage方法将图片绘制到canvas上。

具体代码如下：

<canvas id="canvas" width="500" height="400"></canvas>
<script>
   // 获取canvas画布
   let canvas = document.getElementById("canvas");
   // 获取画布的上下文
   let ctx = canvas.getContext("2d");
   // 创建一个image元素
   let image = new Image();
   // 设置图片的地址
   image.src = "Map1/x1y2.png";
   // 图片加载完成后绘制到canvas上
   image.onload = function () {
      ctx.drawImage(image, 1, 1);
   }
</script>

以上代码可以在canvas上显示一张名为"x1y2.png"的图片。 <span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [Canvas展示图片](https://blog.csdn.net/weixin_46441425/article/details/124255196)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [python tkinter canvas 显示图片的示例](https://download.csdn.net/download/weixin_38569651/12862744)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]