HTML使用canvas载入图片

最新推荐文章于 2023-06-08 09:52:04 发布

原创最新推荐文章于 2023-06-08 09:52:04 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #图片 #canvas

HTML5 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用HTML5的canvas元素加载并显示图片。通过JavaScript实现代码，详细展示了从获取图片到在canvas上绘制的过程。同时，提供了作者的GitHub主页链接，供读者深入学习。

（1）JS实现代码如下：

/**
 * Created by chenyufeng on 15/9/27.
 */
var CANVAS_WIDTH = 500, CANVAS_HEIGHT = 500;
var mycanvas,context;

window.onload = function(){

    createCanvas();
    drawImage();

};

function createCanvas(){

    document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>";

    mycanvas = document.getElementById("mycanvas");
    context = mycanvas.getContext("2d");

}

function drawImage(){

    var img = new Image();
    img.onload = function(){

        context.drawImage(img,0,0);
    };
    img.src = "1.png";

}

（2）HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <script src="app.js"></script>

</body>
</html>

实现要拖入一张图片。

github主页：https://github.com/chenyufeng1991 。欢迎大家访问！