Canvas展示图片

关键: canvas使用drawImage来绘制图片
作用: 把外面的图片导入进来绘制在画布上

步骤:

1. 获得canvas画布
2. 得到画布的上下文
3. 创建一个image元素
4. 绘制图片

<canvas id="canvas" width="500" height="400"></canvas>

	//获得canvas画布
    let canvas = document.getElementById("canvas");
    //得到画布的上下文
    let ctx = canvas.getContext("2d");
    //创建一个image元素
    let image = new Image();
    //用src设置图片的地址
    image.src = "Map1/x1y2.png";
    //onload一下
    image.onload = function () {
        ctx.drawImage(image, 1, 1);
    }

必须要在onload之后绘制图片