使用canvas进行图像绘制与裁剪-优快云博客

本文链接：https://blog.youkuaiyun.com/hgyu_962464/article/details/54893182

这篇博客通过HTML5的canvas元素展示了如何加载并绘制图像。首先获取canvas元素及2D绘图环境，然后创建Image对象加载图片。在window.onload事件中，使用context.drawImage()方法分别进行了完全绘制和定制大小的图像绘制，包括从源图像中截取部分进行绘制，实现了图像的显示和裁剪效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas-绘制图像</title>
    <style>
        #canvas{
            border: 1px solid palevioletred;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px">
    </canvas>
    <script>
        //获取到canvas元素
        var canvas = document.getElementById('canvas');
        //获取canvas中的画图环境
        var context = canvas.getContext('2d');

        //创建Image对象
        var img = new Image();
        //alert(img);
        //引入图片URL
        img.src = "./image/liuyifei.jpg";
        window.onload = function (){
                //完全绘制：不做任何限制来绘制图像
                //.drawImage(图像对象,绘制图像的起始X坐标,绘制图像的起始Y坐标)；
                // context.drawImage(img,0,0);

                //制度范围绘制图像：用于控制图像的大小
                //.drawImage(图像对象,绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
                context.drawImage(img,300,0,200,150);
                //.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，
                // 绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
                context.drawImage(img,470,0,400,600,0,0,300,400);
            }
    </script>
</body>
</html>