Canvas展示图片

最新推荐文章于 2025-05-17 06:18:40 发布

稻田里展望者

最新推荐文章于 2025-05-17 06:18:40 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_46441425/article/details/124255196

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

86 篇文章

订阅专栏

这篇博客介绍了如何利用HTML5的Canvas API进行图片绘制。首先获取canvas元素并得到2D渲染上下文，然后创建一个Image对象，设置其src属性为图片URL。最后，在onload事件中调用drawImage方法将图片绘制到画布上，确保图片加载完成后再进行绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

步骤:

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

<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);
    }