canvas绘制图片

最新推荐文章于 2024-09-24 22:10:23 发布

星星有所不知

最新推荐文章于 2024-09-24 22:10:23 发布

阅读量4.8k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/xnn_1993/article/details/88735304

版权

HTML 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

这篇博客主要介绍了如何利用HTML5的canvas元素进行图片的绘制，包括直接在canvas上绘制图片和从img元素中获取图片进行绘制。此外，还探讨了图片切片的技术，为实现更复杂的图像操作提供了基础。

摘要由CSDN通过智能技术生成

canvas绘制图片

- 1. 绘制图片
- 2. 图片切片

1. 绘制图片

 ctx.drawImage(img, x, y [, width, height]);
 参数说明：
   1. img为new Image()或者document.querySelector('img')返回的对象
   2.  (x, y)为绘制图片的起始坐标位置
   3. width,height 用来控制图片的缩放大小

绘制图片的两种方式：
1. 在canvas上直接绘制图片
2. 绘制img元素中的图片

2. 图片切片

ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
参数说明：
  1. img为new Image()或者document.querySelector('img')返回的对象
  2. (sx,sy)为图片源的切片位置
  3. sWidth, sHeight为图片源的大小
  4. (dx, dy)为切片目标显示的位置
  5. dWidth, dHeight为切片目标显示的大小

<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
</head>
<body>
    <img src='./image/111.png'/>
    <canvas id="canvas" width="1000" height="800" style="border: solid 1px #24d1ec"></canvas>
    <script>
        function draw() {
            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');

            /*保证img绘制完成*/
            window.onload = function () {
                drawImage1(ctx);
                drawImage2(ctx);
                sliceImage(ctx);
            }
        }

        /*在canvas上直接绘制图片*/
        function drawImage1 (ctx) {
            //创建img元素
            let img = new Image();
            //保证img元素绘制完成
            img.onload = function () {
                ctx.drawImage(img, 0, 0);
            };
            img.src = '../ajax/image/cors.png';
        }

        /*基于img元素绘制该元素中的图片,并进行放缩*/
        function drawImage2 (ctx) {
            let img = document.querySelector('img');
            ctx.drawImage(img, 10, 300, 100, 150);
        }

        /*对图片给切片绘制*/
        function sliceImage (ctx) {
            let img = document.querySelector('img');
            ctx.drawImage(img, 10, 10, 50, 50, 250, 300, 100, 100);
        }

        draw();
    </script>
</body>
</html>