Canvas画图片

原创已于 2022-08-28 12:44:03 修改 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

于 2021-07-03 15:09:48 首次发布

Canvas 专栏收录该内容

6 篇文章

订阅专栏

这篇博客主要介绍了如何利用HTML5的Canvas元素进行图片的绘制，通过示例代码展示了具体的操作步骤和实现效果。

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

画图片

在这里插入图片描述
代码如下：

<style>
    canvas {
        margin: 0 auto;
        border: 2px solid #aaa;
        display: block; /*画布居中*/
    }
</style>
<body>
    <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>   
    <script>
        var canvas = document.querySelector("#cont");
        //获取画布上下文
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.src = '1.jpg';

        img.onload = function() {
            //ctx.drawImage(img, 100, 100);
            //ctx.drawImage(img, 100, 100, 300, 300);
            ctx.drawImage(img, 60, 60, 100, 100, 250, 250, 100, 100);
        }
    </script>
</body>