canvas绘制图片drawImage行使要领

不得不说，html5中的canvas真的很是强盛，从图片处理赏罚，到视频处理赏罚，再到游戏开拓，都能见到canvas的身影，然而，就这一个<canvas>标签，成果居然云云强盛，这首要归功于canvas强盛的API，也正是由于这么多的API，让许多人对canvas望而却步。

drawImage绘制图片

drawImage是canvas提供的一个要领，通过这个函数我们可以把一张图片绘制到canvas中。起首看看这个要领的声明：

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

先来表明下几个参数：

image：要绘制的图片，支持许多情势，好比CSSImageValue，HTMLImageElement，SVGImageElement，HTMLVideoElement，HTMLCanvasElement，ImageBitmap 可能OffscreenCanvas

dx：d代表目标（destination），就是canvas上出发点的x轴

dy：canvas上出发点的y轴

dWidth：canvas上绘制的宽度

dHeight：canvas上绘制的高度

sx：s代表原本的（source），就是原始图片的出发点的x轴

sy：原始图片的出发点的y轴

sWidth：截取的原始图片的宽度

sHeight：截取的原始图片的高度

这么多的参数，我来用一句话总结下这个函数的成果：从恣意位置截取指定巨细的图片并将其以指定巨细绘制在canvas上的恣意位置。这里截取的巨细就是sWidth和sHeight来配置，dHeight和dWidth就是绘制的巨细。

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

<div style="border: 1px solid black; width: 300px;height: 300px;"> <canvas id="c1" width="300" height="300"></canvas> </div> <script> var c = document.getElementById('c1'); var ctx = c.getContext('2d'); var img = new Image(); 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"; img.onload = function (e) { drawImg(this); }; function drawImg (img) { ctx.clearRect(0,0, c.width, c.height); ctx.drawImage(img, 0,0, 200, c.height); } </script>

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

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

做一个图片放大器

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

代码也很简朴：

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

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

// 图片改成百度的 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;

在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，开启抗锯齿会粉碎原有像素，像素之间是滑腻过渡的，一样平常肉眼是看不出来的，我们来做个比拟：

// 封锁抗锯齿 ctx.imageSmoothingEnabled = false;

明明的比拟，封锁抗锯齿之后，放大地区像打了马赛克，能明明看到每个像素点，开启抗锯齿的环境下每个像素点之间的渐变则很顺畅，人眼看上去有种恍惚的感受。但从整个画面看，封锁抗锯齿后，图片恍惚了许多。

用canvas来渲染视频

开头也说过，canvas能处理赏罚视频，此刻我们用drawImage来渲染一个视频。

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

<video id="video1" controls="" width="180" style="margin-top:15px;"> <source src=http://www.jb51.net/html5/"1.mp4" type="video/mp4"> </video> <canvas id="c2" width="180" height="320"></canvas> <script> var v=document.getElementById("video1"); var c3=document.getElementById("c2"); ctx3=c3.getContext('2d'); var i = null; // 每20ms截取视频帧 v.addEventListener('play',function() { i = window.setInterval(function() { ctx3.drawImage(v,0,0, 180, 320) },20); }, false); v.addEventListener('pause',function() { window.clearInterval(i); i = null; },false); v.addEventListener('ended', function() { clearInterval(i); i = null; },false); </script>

结果：

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

drawImageData兼容性

到此这篇关于canvas绘制图片drawImage行使要领的文章就先容到这了,更多相干canvas绘制图片drawImage内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!