html5 canvas显示图片

最新推荐文章于 2025-03-07 14:16:26 发布

原创最新推荐文章于 2025-03-07 14:16:26 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas #image

html5 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用HTML5 canvas元素和jQuery结合的方式加载并显示图像的方法。通过具体的代码实例展示了如何利用JavaScript操作DOM来实现图像的加载与绘制，适用于希望了解HTML5 canvas基本用法及jQuery图像处理技巧的读者。

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var c = document.getElementById("myCanvas");
            var cxt = c.getContext("2d");
            var img = new Image();
            img.src = "Jellyfish.jpg";
            img.onload = function () {
                cxt.drawImage(img, 0, 0);
            }
        });
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1024" height="768" style="border: 1px solid #f00;">Your browser does not support the canvas element.
    </canvas>
</body>
</html>