12绘制图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="padding: 100px;">
  <canvas id="canvas" width="900" height="600" style="border:1px solid #000"></canvas>
  <!--<img id="icon" src="images/img_01.jpg" alt="狗狗">-->
  
<script>
     // 1. 获取标签
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
     // 2. 绘制图片 - 方式一
     /*
     var icon = document.getElementById('icon');
     // 当图片加载完毕 (重点)
     icon.onload = function () {
         // 等比
         var w = 200, h = w * (icon.height / icon.width);
         ctx.drawImage(icon, 100, 100, w, h);
     };
     console.log(icon);
     */

    // 3. 绘制图片 - 方式二
    var image = new Image();
    image.src = 'images/img_02.jpg';
    image.onload = function () {
        // 等比公式：  toH = Height * toW   /  Width;
       // 设置的高度 = 原高度 * 设置的宽度 / 原宽度;
        var w = 200, h = w * (this.height / this.width);
        ctx.drawImage(this, 100, 100, w, h);
    };

    // 4. 裁剪图片显示
    var image1 = new Image();
    image1.src = 'images/img_01.jpg';
    image1.addEventListener('load', function () {
        // 裁剪的x,y,width,height 50, 50, 120, 120, 放置的位置x,y,width,height: 350, 100, 120, 120
        ctx.drawImage(this, 50, 50, 120, 120, 350, 100, 120, 120);
    });

</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容