canvas学习和滤镜实现

最近学习了 HTML5 中的重头戏--

canvas
。利用 canvas,前端人员可以很轻松地、进行图像处理。其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码:

  1. 实现去色滤镜
  2. 实现负色(反色)滤镜

欢迎入群:857989948 。IT 技术深度交流和分享,涉及方面包括但不限于:网站制作、运营、UI 设计、算法分析、大数据、人工智能等。本群主打有深度、有态度的技术交流,欢迎热衷记录知识的您的加入。

1 了解 canvas?

1.1 什么是 canvas?

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

1.2 canvas 和 svg、vml 的区别?

<canvas>
标记和 SVG 以及 VML 之间的一个重要的不同是,
<canvas>
有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。

2 canvas 绘图学习

大多数 Canvas 绘图 API 都没有定义在

<canvas>
元素本身上,而是定义在通过画布的
getContext()
方法获得的一个“绘图环境”对象上。而
<canvas>
元素本身默认的宽高分别是 300px、150px。

2.1 canvas 绘制矩形

// 处理canvas元素
var c = document.querySelector("#my-canvas");
c.width = 150;
c.height = 70;// 获取 指定canvas标签 上的context对象
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000"; // 颜色
ctx.fillRect(0, 0, 150, 75); // 形状

2.2 canvas 绘制路径

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0); // 开始坐标
ctx.lineTo(200, 100); // 结束坐标
ctx.stroke(); // 立即绘制

2.3 canvas 绘制圆形

对于

ctx.arc()
这个接口,5 个参数是:
(x,y,r,start,stop)
。其中,x 和 y 是圆心坐标,r 是半径。

start
stop
的单位是 弧度制。不是长度,也不是 °。

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

2.4 canvas 绘制文字

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

3 canvas 图像处理学习

3.1 常用 API 接口

关于图像处理的 API,主要有 4 个:

  • 绘制图像:
    drawImage(img,x,y,width,height)
    drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
  • 获取图像数据:
    getImageData(x,y,width,height)
  • 重写图像数据:
    putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])
  • 导出图像:
    toDataURL([type, encoderOptions])

更详细的 API 和参数说明请看:canvas 图像处理 API 参数讲解

3.2 绘制图像

在此些 API 的基础上,我们就可以在

canvas
元素中绘制我们的图片。假设我们图片是
./img/photo.jpg

<script>window.onload = function () {var img = new Image() // 声明新的Image对象img.src = "./img/photo.jpg"// 图片加载后img.onload = function () {var canvas = document.querySelector("#my-canvas");var ctx = canvas.getContext("2d");// 根据image大小,指定canvas大小canvas.width = img.widthcanvas.height = img.height// 绘制图像ctx.drawImage(img, 0, 0, canvas.width, canvas.height)}}
</script>

如下图所示,图片被画入了 canvas:
canvas插入图片

4 实现滤镜

这里我们主要借用

getImageData
函数,他返回每个像素的 RGBA 值。借助图像处理公式,操作像素进行相应的、数学运算即可。

什么是 RGBA?

更多滤镜实现

4.1 去色效果

去色效果相当于就是老旧相机拍出来的黑白照片。人们根据人眼的敏感程度,给出了如下公式:

gray = red * 0.3   green * 0.59   blue * 0.11

代码如下:

<script>window.onload = function () {var img = new Image()img.src = "./img/photo.jpg"img.onload = function () {var canvas = document.querySelector("#my-canvas");var ctx = canvas.getContext("2d");canvas.width = img.widthcanvas.height = img.heightctx.drawImage(img, 0, 0, canvas.width, canvas.height)// 开始滤镜处理var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);for (var i = 0; i < imgData.data.length / 4;   i) {var red = imgData.data[i * 4],green = imgData.data[i * 4   1],blue = imgData.data[i * 4   2];var gray = 0.3 * red   0.59 * green   0.11 * blue; // 计算gray// 刷新RGB,注意:// imgData.data[i * 4   3]存放的是alpha,不需要改动imgData.data[i * 4] = gray;imgData.data[i * 4   1] = gray;imgData.data[i * 4   2] = gray;}ctx.putImageData(imgData, 0, 0); // 重写图像数据}}
</script>

效果如下图所示:
去色滤镜

4.2 负色效果

负色效果就是用最大值减去当前值。而 getImageData 获得的 RGB 中的数值理论最大值是:255。所以,公式如下:

new_val = 255 - val

代码如下:

<script>window.onload = function () {var img = new Image()img.src = "./img/photo.jpg"img.onload = function () {var canvas = document.querySelector("#my-canvas");var ctx = canvas.getContext("2d");canvas.width = img.widthcanvas.height = img.heightctx.drawImage(img, 0, 0, canvas.width, canvas.height)// 开始滤镜处理var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);for (var i = 0; i < imgData.data.length / 4;   i) {var red = imgData.data[i * 4],green = imgData.data[i * 4   1],blue = imgData.data[i * 4   2];// 刷新RGB,注意:// imgData.data[i * 4   3]存放的是alpha,不需要改动imgData.data[i * 4] = 255 - imgData.data[i * 4];imgData.data[i * 4   1] = 255 - imgData.data[i * 4   1];imgData.data[i * 4   2] = 255 - imgData.data[i * 4   2];}ctx.putImageData(imgData, 0, 0); // 重写图像数据}}
</script>

效果图如下:
负色滤镜

本篇文章来自董沅鑫的个人网站,引用、转载请指明出处

查看更多知识,或者技术交流:请访问

godbmw.com

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h12210j&title=canvas学习和滤镜实现

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android代码混淆作用,Android分享:代码混淆那些事

1) 前言ProGuard是一个开源的Java代码混淆器。它可以混淆Android项目里面的java代码&#xff0c;对的&#xff0c;你没看错&#xff0c;仅仅是java代码。它是无法混淆Native代码&#xff0c;资源文件drawable、xml等。2) ProGuard作用压缩: 移除无效的类、属性、方法等优化: 优…

施工部署主要不包括_建筑工程施工方案及培训实例

[南京]大型土石方工程施工方案本资料为[南京]大型土石方工程施工方案格&#xff0c;共43页。内容简介&#xff1a;本工程位于南京化工园内&#xff0c;扬子玉带扬巴路附近&#xff0c;工程项目为江苏成品油管道配设施扬子玉带油库套油库工程&#xff0c;由中国石化股份有限公司…

java第六次作业

《Java技术》第六次作业 &#xff08;一&#xff09;学习总结 1.用思维导图对本周的学习内容进行总结。 2.当程序中出现异常时&#xff0c;JVM会依据方法调用顺序依次查找有关的错误处理程序。可使用printStackTrace 和getMessage方法了解异常发生的情况。阅读下面的程序&#…

华为鸿蒙不再孤,华为鸿蒙OS系统不再孤单!又一款国产系统启动内测:再掀国产替代化...

【5月10日讯】相信大家都知道&#xff0c;备受广大花粉们期待的鸿蒙OS系统终于开始推送公测版本了&#xff0c;并且适配机型也开始不断地增多&#xff0c;而根据华为官方最新消息&#xff0c;华为鸿蒙OS系统将会在6月份开始大规模推送正式版鸿蒙系统&#xff0c;这无疑将会成为…

CSS 水平垂直居中

方法一&#xff1a; 容器确定宽高&#xff1a;知识点&#xff1a;transform只能设置在display为block的元素上。 <head> <meta charset"UTF-8"> <title>Title</title> <style type"text/css"> #container{…

linux怎么进入文件夹_Linux基础命令《上》

上一节介绍了VMware中安装centos7以及克隆系统&#xff0c;之中用到的几个命名还都是开发不常用的&#xff0c;这节课就准备讲解一下入门的Linux命名&#xff0c;都是日常使用的。首先呢&#xff0c;我们进入系统后&#xff0c;得先知道我是谁&#xff0c;我在哪儿&#xff1f;…

UML学习(一)-----用例图

1、什么是用例图 用例图源于Jacobson的OOSE方法&#xff0c;用例图是需求分析的产物&#xff0c;描述了系统的参与者与系统进行交互的功能&#xff0c;是参与者所能观察和使用到的系统功能的模型图。它的主要目的就是帮助开发团队以一种可视化的方式理解系统的功能需求&#xf…

首款鸿蒙系统终端n,荣耀智慧屏正式发布,首款搭载鸿蒙系统终端,家庭C位新选择...

原标题&#xff1a;荣耀智慧屏正式发布&#xff0c;首款搭载鸿蒙系统终端&#xff0c;家庭C位新选择智能手机的普及率越来越高&#xff0c;其所能够承担的功能也越来越多&#xff0c;电视机对于很多中青年的用户来讲&#xff0c;更多的时候就是个摆设。在家庭中&#xff0c;看电…

oracle如何保证数据一致性和避免脏读

oracle通过undo保证一致性读和不发生脏读 1.不发生脏读2.一致性读3. 事务槽&#xff08;ITL&#xff09;小解1.不发生脏读 例如&#xff1a;用户A对表更新了&#xff0c;没有提交&#xff0c;用户B对进行查询&#xff0c;没有提交的更新不能出现在用户的查询结果中 举例并通个d…

Google Guava BloomFilter

当Guava项目发布版本11.0时&#xff0c;新添加的功能之一是BloomFilter类。 BloomFilter是唯一的数据结构&#xff0c;用于指示元素是否包含在集合中。 使BloomFilter有趣的是&#xff0c;它将指示元素是否绝对不包含或可能包含在集合中。 永远不会出现假阴性的特性使BloomFil…

php 编程祝新年快乐_用于测试自动化的7种编程语言

导读&#xff1a;本文重点介绍测试自动化中排名前七位的编程语言。当人们想要开始做自动化测试&#xff0c;此时却需要开发自动化测试脚本&#xff0c;也就是要学习一门编程语言。那么&#xff0c;我们怎样迈出这一步&#xff1f;也有你已经精通一种编程语言&#xff0c;也可以…

Vue.js开发环境搭建的介绍

包含了最基础的Vue.js的框架&#xff0c;包含了打包工具和测试工具&#xff0c;开发调试的最基本的服务器&#xff0c;不需要关注细节&#xff0c;只需关注Vuejs对项目的实现 npm在国内的网络使用较慢&#xff0c;所以推荐下载安装淘宝的镜像 1&#xff1a; 2&#xff1a;安装c…

html文件转换html格式,pdf文件怎么转换成html格式

PDF文件怎么转换成html格式呢&#xff1f;html格式其实就是网页格式&#xff0c;PDF文件和网页文件一般情况下是两种完全不搭边的格式&#xff0c;但是不可否定的是办公室的多样化总有人会有这样的需求&#xff0c;只要有需求就会有其相应的解决方案。我们可以利用PDF转Word一样…

Eclipse中的Github Gists

我想描述有关在Eclipse中集成GitHub Gists的简单步骤。 有几个来源促使我这样做&#xff1a; Eclipse的GitHub Mylyn连接器 EGit / GitHub /用户指南 http://eclipse.github.com 我一直在使用Eclipse Java EE发行版&#xff0c;其中已经安装了Mylyn插件&#xff1a; 1.通…

CSS3景深-perspective

3D视图正方体&#xff1a; 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>CSS3景深-perspective</title>6 </head>7 <style>8 #div1{9 position: rel…

【BZOJ4262】Sum 单调栈+线段树

【BZOJ4262】Sum Description Input 第一行一个数 t&#xff0c;表示询问组数。第一行一个数 t&#xff0c;表示询问组数。接下来 t 行&#xff0c;每行四个数 l_1, r_1, l_2, r_2。Output 一共 t 行&#xff0c;每行一个数 Sum。Sample Input 4 1 3 5 7 2 4 6 8 1 1 9 9 9 9 1…

父类一实现serializable_我的java基础学习易错点和易忘点总结(一)

一.继承A:子类只能继承父类所有非私有的成员(成员方法和成员变量)B:子类不能继承父类的构造方法&#xff0c;但是可以通过super关键字去访问父类构造方法。二.继承中构造方法的关系A:子类中所有的构造方法默认都会访问父类中空参数的构造方法B:为什么呢?因为子类会继承父类中的…

深入克隆

在继续克隆概念之前&#xff0c;让我们用对象创建概念刷新基础知识。 使用new运算符创建对象时&#xff0c;对象将在堆中获取内存分配。 堆中的对象创建 在Java中&#xff0c;理想情况下仅通过引用变量修改对象&#xff0c;即仅复制对象的内存地址&#xff0c;因此原始对象中…

索引和未索引执行计划的比较_详解Oracle复合索引+实例说明

复合索引复合索引顾名思义&#xff0c;区别于单列索引&#xff0c;是由两个或多个列一起构成的索引。其在B树上的数据结构是什么样&#xff1f;如下图&#xff0c;是一个包含两列的复合索引。如果你观察仔细&#xff0c;还会发现它的叶子节点是ASC递增排序的。现根据第一个值排…

Datables使用总结

本文共四部分&#xff1a;官网 | 基本使用|遇到的问题|属性表 一&#xff1a;官方网站&#xff1a;[http://www.datatables.net/] 二&#xff1a;基本使用&#xff1a;[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { …