怎么使用canvas中drawImage方法

这篇文章给大家分享的是有关怎么使用canvas中drawImage方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。不得不说，html5中的canvas真的非常强大，从图片处理，到视频处理，再到游戏开发，都能见到canvas的身影，然而，就这一个标签，功能居然如此强大，这主要归功于canvas强大的API，也正是因为这么多的API，让很多人对canvas望而却步。
drawImage绘制图片drawImage是canvas提供的一个方法，通过这个函数我们可以把一张图片绘制到canvas中。首先看看这个方法的声明：先来解释下几个参数：image：要绘制的图片，支持很多形式，比如CSSImageValue，HTMLImageElement，SVGImageElement，HTMLVideoElement，HTMLCanvasElement，ImageBitmap或者OffscreenCanvasdx：d代表目的（destination），就是免费云主机域名canvas上起点的x轴dy：canvas上起点的y轴dWidth：canvas上绘制的宽度dHeight：canvas上绘制的高度sx：s代表原来的（source），就是原始图片的起点的x轴sy：原始图片的起点的y轴sWidth：截取的原始图片的宽度sHeight：截取的原始图片的高度这么多的参数，我来用一句话总结下这个函数的功能：从任意位置截取指定大小的图片并将其以指定大小绘制在canvas上的任意位置。这里截取的大小就是sWidth和sHeight来设置，dHeight和dWidth就是绘制的大小。说了这么多，来实际动手做一下：这里我这用了5个参数，我们来试下其他几个参数，这里我就想要美女的头像并把它绘制到中间：做一个图片放大器思路很简单，先获取鼠标位置的像素点，然后把它绘制成更大的区域，就实现了放大。话不多说，先上效果图：代码也很简单：这里需要注意的是，图片资源不能跨域，比如这样：在getImageData是就会报错，说是跨域了：index.html:47 Uncaught DOMException: Failed to execute ‘getImageData’ on
‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.canvas中的抗锯齿所谓抗锯齿，就是图片放大到很大时，能否看到一个一个的像素点，能看到就说明不抗锯齿，canvas中默认是开启了抗锯齿的，也就是imageSmoothingEnabled这个属性是true，开启抗锯齿会破坏原有像素，像素之间是平滑过渡的，一般肉眼是看不出来的，我们来做个对比：明显的对比，关闭抗锯齿之后，放大区域像打了马赛克，能明显看到每个像素点，开启抗锯齿的情况下每个像素点之间的渐变则很顺畅，人眼看上去有种模糊的感觉。但从整个画面看，关闭抗锯齿后，图片模糊了很多。用canvas来渲染视频开头也说过，canvas能处理视频，现在我们用drawImage来渲染一个视频。先说思路：每隔一段时间截取视频的当前帧，绘制出来。就是这么简单，上代码：感谢各位的阅读！关于“怎么使用canvas中drawImage方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！