canvas图片的拼接

最新推荐文章于 2024-07-05 20:20:47 发布

稻田里展望者

最新推荐文章于 2024-07-05 20:20:47 发布

阅读量596

点赞数

分类专栏： Web前端技术文章标签： canvas html JavaScript

本文链接：https://blog.csdn.net/weixin_46441425/article/details/124277933

版权

Web前端技术专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<canvas id="canvas" width="1500" height="1050"></canvas>

<script>
    //得到canvas画布
    let canvas = document.getElementById("canvas");
    //得到画布的上下文
    let ctx = canvas.getContext("2d");
    //创建一个image元素
    let image1 = new Image();
    let image2 = new Image();
    let image3 = new Image();
    let image4 = new Image();
    let image5 = new Image();
    let image6 = new Image();
    //用src设置图片的地址
    image1.src = "layer/_alllayers/L00/R00001b30/C00001219.png";
    image4.src = "layer/_alllayers/L00/R00001b30/C0000121a.png";
    image2.src = "layer/_alllayers/L00/R00001b31/C00001219.png";
    image5.src = "layer/_alllayers/L00/R00001b31/C0000121a.png";
    image3.src = "layer/_alllayers/L00/R00001b32/C00001219.png";
    image6.src = "layer/_alllayers/L00/R00001b32/C0000121a.png";
    //onload一下
    image1.onload = function () {
        ctx.drawImage(image1, 0, 0);
    }
    image2.onload = function () {
        ctx.drawImage(image2, 0, 256);
    }
    image3.onload = function () {
        ctx.drawImage(image3, 0, 256*2);
    }
    image4.onload = function () {
        ctx.drawImage(image4, 256, 0);

    }
    image5.onload = function () {
        ctx.drawImage(image5, 256, 256);
    }
    image6.onload = function () {
        ctx.drawImage(image6, 256, 256*2);
    }
</script>
</body>
</html>