不得不说，html5中的canvas真的非常强大，从图片处理，到视频处理，再到游戏开发，都能见到canvas的身影，然而，就这一个

1. <canvas>

复制代码

标签，功能居然如此强大，这主要归功于canvas强大的API，也正是因为这么多的API，让很多人对canvas望而却步。

drawImage绘制图片

1. drawImage

复制代码

是

1. canvas

复制代码

提供的一个方法，通过这个函数我们可以把一张图片绘制到canvas中。首先看看这个方法的声明：

1. void ctx.drawImage(image, dx, dy);
   
2. void ctx.drawImage(image, dx, dy, dWidth, dHeight);
   
3. void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

复制代码

先来解释下几个参数：

   

• image：要绘制的图片，支持很多形式，比如
  1. CSSImageValue

  复制代码
  ，
  1. HTMLImageElement

  复制代码
  ，
  1. SVGImageElement

  复制代码
  ，
  1. HTMLVideoElement

  复制代码
  ，
  1. HTMLCanvasElement

  复制代码
  ，
  1. ImageBitmap

  复制代码
  或者
  1. OffscreenCanvas

  复制代码
     
  
• dx：d代表目的（destination），就是canvas上起点的x轴   
  
• dy：canvas上起点的y轴   
  
• dWidth：canvas上绘制的宽度   
  
• dHeight：canvas上绘制的高度   
  
• sx：s代表原来的（source），就是原始图片的起点的x轴   
  
• sy：原始图片的起点的y轴   
  
• sWidth：截取的原始图片的宽度   
  
• sHeight：截取的原始图片的高度
  

这么多的参数，我来用一句话总结下这个函数的功能：从任意位置截取指定大小的图片并将其以指定大小绘制在canvas上的任意位置。这里截取的大小就是

1. sWidth

复制代码

和

1. sHeight

复制代码

来设置，

1. dHeight

复制代码

和

1. dWidth

复制代码

就是绘制的大小。
说了这么多，来实际动手做一下：

1. <div style="border: 1px solid black; width: 300px;height: 300px;">
   
2. 
   
3.     <canvas id="c1" width="300" height="300"></canvas>
   
4. 
   
5.   </div>
   
6. 
   
7. <script>
   
8. 
   
9. var c = document.getElementById('c1');
   
10. 
    
11. var ctx = c.getContext('2d');
    
12. 
    
13. var img = new Image();
    
14. 
    
15. img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg";
    
16. 
    
17. img.onload = function (e) {
    
18. 
    
19.   drawImg(this);
    
20. 
    
21. };
    
22. 
    
23. function drawImg (img) {
    
24. 
    
25.   ctx.clearRect(0,0, c.width, c.height);
    
26. 
    
27.   ctx.drawImage(img, 0,0, 200, c.height);
    
28. 
    
29. }
    
30. </script>

复制代码

这里我这用了5个参数，我们来试下其他几个参数，这里我就想要美女的头像并把它绘制到中间：

1. ctx.drawImage(img, 200,150, 160, 180, 70, 60, 160, 180);

复制代码

做一个图片放大器
思路很简单，先获取鼠标位置的像素点，然后把它绘制成更大的区域，就实现了放大。话不多说，先上效果图：

代码也很简单：

1. <div style="border: 1px solid black; width: 300px;height: 300px;">
   
2.     <canvas id="c1" width="300" height="300"></canvas>
   
3.   </div>

复制代码

这里需要注意的是，图片资源不能跨域，比如这样：

1. // 图片改成百度的
   
2. img.src = <a target="_blank" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg">https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg</a>;

复制代码

在getImageData是就会报错，说是跨域了：

1. index.html:47 Uncaught DOMException: Failed to execute 'getImageData' on
   
2. 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

复制代码

canvas中的抗锯齿
所谓抗锯齿，就是图片放大到很大时，能否看到一个一个的像素点，能看到就说明不抗锯齿，canvas中默认是开启了抗锯齿的，也就是imageSmoothingEnabled这个属性是true，开启抗锯齿会破坏原有像素，像素之间是平滑过渡的，一般肉眼是看不出来的，我们来做个对比：

1. // 关闭抗锯齿
   
2. ctx.imageSmoothingEnabled = false;

复制代码

明显的对比，关闭抗锯齿之后，放大区域像打了马赛克，能明显看到每个像素点，开启抗锯齿的情况下每个像素点之间的渐变则很顺畅，人眼看上去有种模糊的感觉。但从整个画面看，关闭抗锯齿后，图片模糊了很多。
用canvas来渲染视频
开头也说过，canvas能处理视频，现在我们用drawImage来渲染一个视频。
先说思路：每隔一段时间截取视频的当前帧，绘制出来。就是这么简单，上代码：

1. <video id="video1" controls="" width="180" style="margin-top:15px;">
   
2.           <source src="1.mp4" type="video/mp4">
   
3.         </video>
   
4. 
   
5.         <canvas id="c2" width="180" height="320"></canvas>
   
6. 
   
7. <script>
   
8.     var v=document.getElementById("video1");
   
9. var c3=document.getElementById("c2");
   
10. ctx3=c3.getContext('2d');
    
11. var i = null;
    
12. 
    
13. // 每20ms截取视频帧
    
14. v.addEventListener('play',function() {
    
15.         i = window.setInterval(function() {
    
16.                 ctx3.drawImage(v,0,0, 180, 320)
    
17.         },20);
    
18. }, false);
    
19. 
    
20. v.addEventListener('pause',function() {
    
21.         window.clearInterval(i);
    
22.         i = null;
    
23. },false);
    
24. 
    
25. v.addEventListener('ended', function() {
    
26.         clearInterval(i);
    
27.         i = null;
    
28. },false);
    
29. </script>

复制代码

效果：

cool， 左侧是video标签显示的视频，右侧是我们用canvas绘制的，每20毫秒绘制一次，很棒哦。如果我们把时间放长一点，就能实现卡顿的效果😂

drawImageData兼容性

到此这篇关于canvas绘制图片drawImage使用方法的文章就介绍到这了,更多相关canvas绘制图片drawImage内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/745191.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！