canvas绘制图片drawImage使用方法


Posted in HTML / CSS onSeptember 15, 2020

不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于canvas强大的API,也正是因为这么多的API,让很多人对canvas望而却步。

canvas绘制图片drawImage使用方法

drawImage绘制图片

drawImagecanvas提供的一个方法,通过这个函数我们可以把一张图片绘制到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);

canvas绘制图片drawImage使用方法

先来解释下几个参数:

  • image:要绘制的图片,支持很多形式,比如CSSImageValueHTMLImageElementSVGImageElementHTMLVideoElementHTMLCanvasElementImageBitmap 或者OffscreenCanvas
  • dx:d代表目的(destination),就是canvas上起点的x轴
  • dy:canvas上起点的y轴
  • dWidth:canvas上绘制的宽度
  • dHeight:canvas上绘制的高度
  • sx:s代表原来的(source),就是原始图片的起点的x轴
  • sy:原始图片的起点的y轴
  • sWidth:截取的原始图片的宽度
  • sHeight:截取的原始图片的高度

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

说了这么多,来实际动手做一下:

<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>

canvas绘制图片drawImage使用方法

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

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

canvas绘制图片drawImage使用方法

做一个图片放大器

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

canvas绘制图片drawImage使用方法

代码也很简单:

<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,开启抗锯齿会破坏原有像素,像素之间是平滑过渡的,一般肉眼是看不出来的,我们来做个对比:

canvas绘制图片drawImage使用方法

canvas绘制图片drawImage使用方法

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

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

用canvas来渲染视频

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

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

<video id="video1" controls="" width="180" style="margin-top:15px;">
	  <source src="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>

效果:

canvas绘制图片drawImage使用方法

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

canvas绘制图片drawImage使用方法

drawImageData兼容性

canvas绘制图片drawImage使用方法

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

HTML / CSS 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 #HTML / CSS
浅析HTML5 Landmark
Sep 11 #HTML / CSS
详解HTML5中CSS外观属性
Sep 10 #HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 #HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 #HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 #HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 #HTML / CSS
You might like
php&amp;mysql 日期操作小记
2012/02/27 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python中关于使用模块的基础知识
2015/05/24 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Django添加feeds功能的示例
2018/08/07 Python
python读文件的步骤
2019/10/08 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
python matplotlib库的基本使用
2020/09/23 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
医学院护理专业应届生求职信
2013/11/12 职场文书
学校七一活动方案
2014/01/19 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang