HTML5 cavas画布加载图片

最新推荐文章于 2025-04-21 10:25:07 发布

原创最新推荐文章于 2025-04-21 10:25:07 发布 · 1.8w 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #browser #border #function #image

收录于

网络管理专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素加载并显示一张图片。通过JavaScript控制图片的加载过程，并在图片加载完成后将其绘制到Canvas上。示例代码展示了整个过程。

HTML5 cavas画布加载图片

<!DOCTYPE HTML>
<html>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/img/flower.png";
img.onload = function () //确保图片已经加载完毕
{
    cxt.drawImage(img,100,100);
}

</script>

</body>
</html>