js给图片打马赛克的方法示范
发布时间:2021-11-13 16:53 所属栏目:13 来源:互联网
导读:Canvas简介 这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript) 不过, 元素本身并没有绘制
Canvas简介 这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript) 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务 getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性 本手册提供完整的 getContext(“2d”) 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等 标记和 SVG 以及 VML 之间的差异: 标记和 SVG 以及 VML 之间的一个重要的不同是, 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。 这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是,每一种都有强项和弱点。例如,SVG 绘图很容易编辑,只要从其描述中移除元素就行。 要从同一图形的一个 标记中移除元素,往往需要擦掉绘图重新绘制它。 知识点简介 利用js创建图片 let img = new Image() //可以给图片一个链接 img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg' //或者本地已有图片的路径 //img.src = './download.jpg' //添加到HTML中 document.body.appendChild(img) canvas.getContext(“2d”) 语法: 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”,它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API let ctx = Canvas.getContext(contextID) ctx.drawImage() JavaScript 语法 1: 在画布上定位图像: context.drawImage(img,x,y); JavaScript 语法 2: 在画布上定位图像,并规定图像的宽度和高度: context.drawImage(img,x,y,width,height); JavaScript 语法 3: 剪切图像,并在画布上定位被剪切的部分: JavaScript 语法 getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。 对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值: R - 红色 (0-255) G - 绿色 (0-255) B - 蓝色 (0-255) A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的) color/alpha 以数组形式存在,并存储于 ImageData 对象的 data 属性中 var imgData=context.getImageData(x,y,width,height); ctx.putImageData() putImageData() 方法将图像数据(从指定的 ImageData 对象)放回画布上。 接下来跟着我一步一步做完这个小功能叭~ (编辑:ASP站长网) |
相关内容
网友评论
推荐文章
热点阅读