Canvas 绘制图片(drawImage())

原创 2018年04月14日 22:22:50


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-drawImage 绘制图片模糊问题

最近遇到这样的问题,使用canvas输出图片,图片比canvas区域大,尺寸限制之后反而变得特别模糊: 代码: var c = document.getElementById("m...
  • oYueMiJinDu
  • oYueMiJinDu
  • 2016年05月12日 17:50
  • 2974

Html5新特性 canvas画板画直线和等比缩放居中裁剪图片

介绍一下canvas的几种使用方法,画直线和裁剪图片;包含以下两个方面: 1、canvas裁剪图片:h5的这个新特性,我们可以使用canvas进行图片的处理,比如裁剪,等比放大或缩小。比如我们有个...
  • fengshizty
  • fengshizty
  • 2014年05月14日 12:52
  • 4898

canvas 绘制半透明图片

var maskCanvas=document.createElement("canvas");       maskCanvas.style="pointer-events: none; z-in...
  • ningcaicheng
  • ningcaicheng
  • 2017年01月02日 14:57
  • 3312

Canvas入门(3):图像处理和绘制文字

9个JQuery和5个JavaScript经典面试题
  • u011043843
  • u011043843
  • 2014年10月14日 00:06
  • 3169

html5 canvas drawImage图片模糊

问题:当使用如下设置时,图片显示模糊 javascriptvar img=new Image(); img.src="http://www.w3school.com.cn/i/eg_tulip.jp...
  • gdp12315
  • gdp12315
  • 2017年02月17日 16:06
  • 1140

小程序中的drawImage

昨天夜里看着微信的推送通知,小程序新功能,个人可以申请小程序,公众号自定义菜单可以打开小程序……又是开心又是难过,开心小程序的不断发展,难过小程序的不够完善,个人自开发以来,处处踩坑,canvas也是...
  • luojingonline
  • luojingonline
  • 2017年03月28日 19:10
  • 3994

Canvas使用drawImage()函数在画布上显示图像

Canvas使用drawImage()函数在画布上显示图像
  • Wangdanting123
  • Wangdanting123
  • 2016年08月12日 23:28
  • 1830

H5之DrawImage使用

H5 canvas画布使用绘图context.drawImage();
  • qq_36220729
  • qq_36220729
  • 2017年03月24日 11:18
  • 1303

canvas drawImage初次加载以及加载完成后事件

直接调用canvas的 drawImage()方法首次加载时图片不显示,解决方案是在Img.onload()方法中绘制图。但是如果以后需要不断的绘制该图片的时候就会一直调用onload事件,出现图片一...
  • cuiyaoqiang
  • cuiyaoqiang
  • 2016年10月26日 17:54
  • 3413

Canvas 在高清屏下绘制图片变模糊的解决方法

问题: 用canvas绘制图片的时候会模糊,但是用img显示的时候就不会,canvas和img的大小是相同的  至于为什么会变模糊,这和浏览器处理 canvas 的方式有关,相关的文章可以参考这篇...
  • qyaroon
  • qyaroon
  • 2016年07月15日 11:31
  • 7083
收藏助手
不良信息举报
您举报文章:Canvas 绘制图片(drawImage())
举报原因:
原因补充:

(最多只允许输入30个字)