36-使用cavnas绘制图片-CSDN博客

本文链接：https://blog.csdn.net/gaowxx/article/details/146979983

36-使用cavnas绘制图片_哔哩哔哩_bilibili36-使用cavnas绘制图片是一次性学会 Canvas 动画绘图（核心精讲+50个案例）2023最新教程的第37集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.videopod.episodes&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=37

方法一

const canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 400;
document.body.append(canvas);
const context = canvas.getContext('2d');
// 目标： 理解 drawImage 如何画图片
// 1. 准备一个图片源
let img = new Image();
img.src = './001.jpg';

// 图片加载需要时间，这个过程不会阻塞js的执行，需要等待图片加载完成才能进行绘制
img.onload = function () {
    // 2. 调用 drawImage 画图片
    // a. 第一种，传入绘制的坐标，按照原有的大小绘制
    context.drawImage(img, 100, 100)

}

方法二

// 图片加载需要时间，这个过程不会阻塞js的执行，需要等待图片加载完成才能进行绘制
img.onload = function () {
    // 2. 调用 drawImage 画图片
    // a. 第一种，传入绘制的坐标，按照原有的大小绘制
    // context.drawImage(img, 100, 100)

    // b. 第二种，传入绘制的坐标以及渲染的大小
    context.drawImage(img, 100, 100, 100, 200);

}

打印可得到图片的宽高，可以根据图片的宽高比，算出渲染大小（过程要自己计算）

console.log(img.width, img.height);

方法三

// c. 传入要裁切的区域，渲染到页面上（精灵图）
//                     裁切坐标    裁切大小   展示坐标  展示大小 
context.drawImage(img, 260, 250, 100, 100, 50, 50, 100, 100)

【完整代码】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>
    const canvas = document.createElement('canvas');
    canvas.width = 600;
    canvas.height = 400;
    document.body.append(canvas);
    const context = canvas.getContext('2d');
    // 目标： 理解 drawImage 如何画图片
    // 1. 准备一个图片源
    let img = new Image();
    img.src = './001.jpg';

    // 图片加载需要时间，这个过程不会阻塞js的执行，需要等待图片加载完成才能进行绘制
    img.onload = function () {
        // 2. 调用 drawImage 画图片
        // a. 第一种，传入绘制的坐标，按照原有的大小绘制
        // context.drawImage(img, 100, 100)

        // b. 第二种，传入绘制的坐标以及渲染的大小
        // context.drawImage(img, 100, 100, 100, 200);

        // 可以根据图片的宽高比，算出渲染大小
        // console.log(img.width, img.height);

        // c. 传入要裁切的区域，渲染到页面上（精灵图）
        //                     裁切坐标    裁切大小   展示坐标  展示大小 
        context.drawImage(img, 260, 250, 100, 100, 50, 50, 100, 100)

    }

</script>

</html>