使用drawimage绘制图像,canvas绘制一张图片
不得不说，html5中的canvas真的很强大。从图片处理、视频处理到游戏开发都可以看到canvas。但是这个canvas标签的功能这么强大，主要还是得益于它强大的API，也正是因为API这么多，才让很多人对canvas望而却步。
drawImage绘制图片
DrawImage是canvas提供的方法。通过这个函数，我们可以将一幅画绘制到画布上。先看这个方法的语句：
void ctx.drawImage(image，dx，dy)；void ctx.drawImage(image，dx，dy，dWidth，d height)；void ctx.drawImage(image，sx，sy，sWidth，sHeight，dx，dy，dWidth，d height)；
让我们先解释下几个参数：
图像：要绘制的图片支持多种形式，如CSSImageValue、HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap或离屏画布dx: d代表目的地，即画布上起点的x轴dy:画布上起点的y轴d宽度：画布上绘制的宽度d高度：画布上绘制的高度sx: s代表原物(源)， 就是原图原点的x轴sy:原图原点的y轴sWidth:抓取的原图的宽度：抓取的原图的高度。 这么多参数，我用一句话概括一下这个函数的作用：从任意位置捕捉一张指定大小的图片，在画布上任意位置以指定大小绘制。这里的裁剪尺寸由sWidth和sHeight设置，dHeight和dWidth是绘图尺寸。
说了这么多，还是实际做吧：
div style=border: 1px纯黑；宽度：300px高度：300像素；canvas id= C1 width= 300 height= 300 /canvas/div script var c=document . getelementbyid( C1 )；var CTX=c . get context( 2d )；var img=new Image()；img . src= https://Tim GSA . Baidu . com/timg？ image quality=80 size=b 9999 _ 10000 sec=1599994255228 di=2 f8ea 231 D1 f1 b 557 a 73 b 0 f 1733 bb 71 cfimgtype=0 src=http://f . 01 ny . cn/forum/2012 06/28/143206 F8 u 8 ruk 6 eeq r7 x3u . jpg ；img . onload=function(e){ draw img(this)；};函数drawImg (img) { ctx.clearRect(0，0，c.width，c . height)；ctx.drawImage(img，0，0，200，c . height)；}/脚本
这里，我使用了五个参数。让我们试试其他参数。这里，我要美女的头像，画到中间：
ctx.drawImage(img，200，150，160，180，70，60，160，180)；
做一个图片放大器
想法很简单。首先获取鼠标位置的像素，然后绘制成更大的区域进行放大。话不多说，先上效果图：
代码也很简单：
div style=border: 1px纯黑；宽度：300px高度：300像素；canvas ID= C1 width= 300 height= 300 /canvas/div这里需要注意的是图片资源不能跨域，像这样：
//把图片改成百度的img . src=https://timgsa.baidu.com/timg? image quality=80 size=b 9999 _ 10000 sec=1599994255228 di=2 f8ea 231 D1 f1 b 557 a 73 b 0 f 1733 bb 71 cfimgtype=0 src=http://f . 01 ny . cn/forum/201206/28/143206 F8 u 8 ruk 6 eeq r7 x3u . jpg；在getImageData中，您将报告一个错误，说它是跨域的：
index.html:47未捕获的DOMException:无法对执行“getImageData”
CanvasRenderingContext2D :画布已被跨原点数据污染。
canvas中的抗锯齿
抗锯齿指的是当图像放大到很大尺寸时，你是否能看到一个个像素。如果你能看到它们，说明你没有抗锯齿。默认情况下，canvas中抗锯齿是打开的，即imageSmoothingEnabled属性为true。开启抗锯齿会破坏原有像素，像素之间有平滑过渡，一般肉眼看不到。我们来做个对比：
//关闭抗锯齿CTX . imagesmoothingenabled=false；对比明显，反走样关闭后，放大的区域就像马赛克一样，每个像素都能看得很清楚。开启抗锯齿时，每个像素之间的渐变是平滑的，人眼有一种模糊的感觉。但是从整个画面来看，反走样关闭后，画面模糊了很多。
用画布渲染视频
开头也说了canvas可以处理视频。现在我们使用drawImage来渲染一个视频。
先说思路：每隔一段时间抓拍视频的当前帧，画出来。就这么简单，只需编码：
video id= video 1 controls= width= 180 style= margin-top:15px；source src= 1 . MP4 type= video/MP4 /video canvas id= C2 width= 180 height= 320 /canvasscript var v=document . getelementbyid( video 1 )；var C3=document . getelementbyid( C2 )；CTX 3=C3 . get context( 2d )；var i=null//每隔20ms截取视频帧v. AddEvent Listener (play ，function(){ I=window . setinterval(function(){ CTX 3 . draw image(v，0，0，180，320)}，20)；}，假)；v.addEventListener(pause ，function(){ window . clear interval(I)；i=null}，假)；v.addEventListener(ended ，function(){ clear interval(I)；i=null}，假)；/脚本效果：
酷，左边是视频标签显示的视频，右边是画布绘制的，每20毫秒绘制一次。太棒了。如果再放久一点，就能达到卡顿效果。
绘图图像数据兼容性
这就是这篇关于如何使用画布绘制图像的文章。关于画布绘图图像的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。