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> 


阅读更多
个人分类: Canvas
上一篇Cancas 画饼状图(arc())
下一篇Canvas 帧动画,绘制图像(drawImage())
想对作者说点什么? 我来说一句

Html5 Canvas 图片开门效果

2012年11月24日 64KB 下载

canvas实现转盘抽奖的绘制

2017年10月22日 87KB 下载

安卓绘图 canvas 绘图 平移缩放

2013年02月01日 77KB 下载

canvas绘制七巧板

2017年09月23日 909B 下载

js canvas图形验证码

2017年09月04日 2KB 下载

移动端手写签名js

2018年05月07日 2KB 下载

HTML5 canvas绘制流程图

2017年01月18日 82KB 下载

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

关闭
关闭