Canvas 插入图片

最新推荐文章于 2025-07-02 16:11:33 发布

2021乐乐

最新推荐文章于 2025-07-02 16:11:33 发布

阅读量1.9k

点赞数 1

分类专栏： html+css+js 文章标签： canvas 图片

html+css+js 专栏收录该内容

24 篇文章

订阅专栏

最初想用w3c上面的方法：

http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_image

发现不行。

最后看到一篇博客：介绍是因为图片加载没有完成，所以巴拉巴拉......

https://blog.youkuaiyun.com/m0_38073011/article/details/80027397

自己写的代码：

<!DOCTYPE HTML>
<html>
    
<body>
<script  type="text/javascript" src="jquery-3.2.1.min.js"></script> //注意此处的位置      
<canvas id="myCanvas" width="800" height="1000" style="border:1px solid #c3c3c3;">
</canvas>
<img src="I:/JS+20181213/gui_develop/background.png" hidden="hidden" id="img1">
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=document.getElementById("img1");
img.onload=function(){cxt.drawImage(img,0,0);};
</script>
</body>
</html>