canvas-绘制图像

最新推荐文章于 2024-08-13 12:49:55 发布

十里夜

最新推荐文章于 2024-08-13 12:49:55 发布

阅读量927

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/hgyu_962464/article/details/54893182

版权

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

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

<!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);

                //