canvas绘制图片drawImage使用方法

不得不说，html5中的canvas真的非常强大，从图片处置处罚，到视频处置处罚，再到游戏开辟，都能见到canvas的身影，然而，就这一个[code]<canvas>[/code]标签，功能居然如此强大，这重要归功于canvas强大的API，也正是由于这么多的API，让很多人对canvas望而却步。

drawImage绘制图片

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

先来解释下几个参数：

• image：要绘制的图片，支持很多形式，比如[code]CSSImageValue[/code]，[code]HTMLImageElement[/code]，[code]SVGImageElement[/code]，[code]HTMLVideoElement[/code]，[code]HTMLCanvasElement[/code]，[code]ImageBitmap[/code] 大概[code]OffscreenCanvas[/code]
• dx：d代表目的（destination），就是canvas上出发点的x轴
• dy：canvas上出发点的y轴
• dWidth：canvas上绘制的宽度
• dHeight：canvas上绘制的高度
• sx：s代表原来的（source），就是原始图片的出发点的x轴
• sy：原始图片的出发点的y轴
• sWidth：截取的原始图片的宽度
• sHeight：截取的原始图片的高度

这么多的参数，我来用一句话总结下这个函数的功能：从恣意位置截取指定大小的图片并将其以指定大小绘制在canvas上的恣意位置。这里截取的大小就是[code]sWidth[/code]和[code]sHeight[/code]来设置，[code]dHeight[/code]和[code]dWidth[/code]就是绘制的大小。

说了这么多，来实际动手做一下：

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

做一个图片放大器

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

代码也很简朴：

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

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

canvas中的抗锯齿

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

显着的对比，关闭抗锯齿之后，放大地域像打了马赛克，能显着看到每个像素点，开启抗锯齿的环境下每个像素点之间的渐变则很顺畅，人眼看上去有种模糊的感觉。但从整个画面看，关闭抗锯齿后，图片模糊了很多。

用canvas来渲染视频

开头也说过，canvas能处置处罚视频，现在我们用drawImage来渲染一个视频。

先说思路：每隔一段时间截取视频的当前帧，绘制出来。就是这么简朴，上代码：

效果：

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

drawImageData兼容性

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