Html5开发-使用Canvas绘制图片

最新推荐文章于 2024-09-14 19:33:38 发布

前端老码农

最新推荐文章于 2024-09-14 19:33:38 发布

阅读量333

点赞数 1

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jiicahk0j&title=Html5%E5%BC%80%E5%8F%91-%E4%BD%BF%E7%94%A8Canvas%E7%BB%98%E5%88%B6%E5%9B%BE%E7%89%87

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

呈现图片 | drawImage()
canvas/media/image.html

<!DOCTYPE HTML>
<html>
<head>
    <title>在 canvas 上呈现图片的 demo</title>
</head>
<body>
    <canvas id="canvas" width="800" height="600" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">在画布上呈现图片</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            var img = new Image();

            img.onload = function () {

                /*
                 * context.drawImage() 的可绘制对象包括：HTMLImageElement, HTMLVideoElement, HTMLCanvasElement
                 *
                 * context.drawImage(image, x, y) - 绘制图像
                 *   image - 图像对象，可以来自 img 标签
                 *   x - 图像绘制到画布后的左上角的 x 坐标
                 *   y - 图像绘制到画布后的左上角的 y 坐标
                 *
                 * context.drawImage(image, x, y, width, height) - 绘制图像
                 *   image - 图像对象，可以来自 img 标签
                 *   x - 图像绘制到画布后的左上角的 x 坐标
                 *   y - 图像绘制到画布后的左上角的 y 坐标
                 *   width - 图像绘制到画布后的宽
                 *   height - 图像绘制到画布后的高
                 *
                 * context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) - 绘制图像
                 *   image - 图像对象，可以来自 img 标签
                 *   sourceX - 截取源图像，相对于源图像的左上角的 x 坐标，
                 *   sourceY - 截取源图像，相对于源图像的左上角的 y 坐标，
                 *   sourceWidth - 截取源图像，需要截取的宽
                 *   sourceHeight - 截取源图像，需要截取的高
                 *   destX - 图像绘制到画布后的左上角的 x 坐标
                 *   destY - 图像绘制到画布后的左上角的 y 坐标
                 *   destWidth - 图像绘制到画布后的宽
                 *   destHeight - 图像绘制到画布后的高
                 *
                 */

                ctx.drawImage(img, 0, 0); // 按图像原始大小显示到画布上
                ctx.drawImage(img, 0, 0, 200, 200); // 显示图像到画布上，并指定其宽高
                ctx.drawImage(img, 50, 0, 400, 100, 0, 300, 200, 50); // 截取源图像的一部分显示到画布上，并指定被截取部分显示时的宽和高
            }

            img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
            // img.src = "http://www.cnblogs.com/assets/html5_logo.png";
        }

        function clearIt() {
            ctx.clearRect(0, 0, 800, 600);
        }

    </script>
</body>
</html>