Canvas 绘制图片(drawImage())


demo.html:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style>  
        canvas {  
            border:1px solid red;  
        }  
        img {  
            display: none;  /* 隐藏img标签,让图像在canvas画布上显示 */  
        }  
    </style>  
</head>  
<body>  
    <canvas id="cvs" width="500" height="500"></canvas>  
    <img src="./imgs/youyouyou.jpg">  
    <script>  
        var cvs = document.getElementById('cvs');  
        var ctx = cvs.getContext('2d');  
        var img = document.querySelector('img');  
  
        /* 
        * ctx.drawImage() 
        * 绘制图像,有三种使用方式。 
        * */  
  
        /* 
        * 第一种,三参数版本: 
        * 把图像绘制到指定的坐标。 
        * */  
  
        // 必须要在img图像加载完毕之后使用  
        /*img.onload = function() {  //bug: 如果图片是从缓存中加载(比较快),图片加载完后,才会注册加载事件,那么就不会监听到加载事件。 解决:在下方手动为img标签指定src属性的值。 
            ctx.drawImage( img, 10, 10 ); 
        }*/  
        //img.src = "...";  //可以保证先注册onload事件,后加载图片。  
  
        /************************************************* 
         * 第二种,五参数版本: 
         * 把图像绘制到指定的坐标,并指定其大小。 
         * */  
  
        /*img.onload = function() { 
            ctx.drawImage( img, 10, 10, 200, 200 ); 
        }*/  
  
        /************************************************** 
         * 第三种,九参数版本: 
         * 把裁剪到的部分图像绘制到指定的坐标,并指定其大小。 
         * */  
        img.onload = function() {  
            ctx.drawImage( img,  
                    300, 100, 400, 400,   //裁剪的位置,裁剪大小  
                    10, 10, 200, 200 );  //显示位置,显示大小  
        } 

        //img.src = "...";  //可以保证先注册onload事件,后加载图片。  
    </script>  
</body>  
</html> 


阅读更多

没有更多推荐了,返回首页