首页 前端知识 HTML5(六)——Canvas 高级操作,对前端开发的现状和未来发展的思考

HTML5(六)——Canvas 高级操作,对前端开发的现状和未来发展的思考

2024-05-05 12:05:28 前端知识 前端哥 509 597 我要收藏

transform可以替代前边平移、缩放、旋转三者,如下:

// 平移

translate(x,y) <=> transform(1,0,0,1,x,y) <=> transform(0,1,1,0,x,y)

// 缩放

sacle(x,y) <=> transform(x,0,0,y,0,0)

// 旋转

rotate(angle) <=> transform(Math.cos(angleMath.PI/180), Math.sin(angelMath.PI/180), -Math.sin(angleMath.PI/180), Math.cos(angleMath.PI/180))

1.5、setTransform - 矩阵变换

setTransform()方法将变换的矩阵进行重置,它把当前的变换矩阵重置为单位矩阵

使用语法:transform(a,b,c,d,e,f)

各参数说明:水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动

setTransform() 方法把当前的变换矩阵重置为单位矩阵,然后以相同的参数运行 transform()。

二、canvas 操作图片

=============

drawImage() 在画布上绘制图像、画布或视频。也能够绘制图片的一部分,增加或减少图像的尺寸。以下是三种常见使用语法:

  • 语法1:drawImage( img , x , y )

  • 语法2:drawImage( img , x , y , width , height )

  • 语法3:drawImage( img , sx , sy , swidth, sheight , x , y , width , height )

上述参数表示的意义如下:

参数

描述

img

规定要使用的图像、画布或视频。

sx

可选。开始剪切的 x 坐标位置。

sy

可选。开始剪切的 y 坐标位置。

swidth

可选。被剪切图像的宽度。

sheight

可选。被剪切图像的高度。

x

在画布上放置图像的 x 坐标位置。

y

在画布上放置图像的 y 坐标位置。

width

可选。要使用的图像的宽度。(伸展或缩小图像)

height

可选。要使用的图像的高度。(伸展或缩小图像)

eg:利用语法3,进行绘制图片的部分内容,实现如下效果:

HTML5(六)——Canvas 高级操作

给上述兔子顺便加一个点击屏幕暂停开始功能,完整代码如下:

eg:使用 canvas 画布处理视频,使用定时器绘制视频的当前帧,连续起来就是一个视频,需要注意的是必须处理暂停和开始播放两种操作,具体代码如下:

var v=document.getElementById(“video1”);

var c=document.getElementById(“myCanvas”);

ctx=c.getContext(‘2d’);

v.addEventListener(‘play’,function() {var i=window.setInterval(function()

{ctx.drawImage(v,0,0,270,135)},20);},false);

v.addEventListener(‘pause’,function() {window.clearInterval(i);},false);

v.addEventListener(‘ended’,function() {clearInterval(i);},false);

三、像素级操作

=======

常见的像素级的操作有三种:

  • getImageData() - 获取画布像素数据

  • createImageData() - 创建新的、空白像素

  • putImageData() - 图像像素数据放回画布

3.1、getImageData

使用语法:getImageData( x , y , width , height )

  • x:要被提取的图像数据矩形区域的左上角 x 坐标。

  • y:要被提取的图像数据矩形区域的左上角 y 坐标。

  • width:被提取的图像数据矩形区域的宽度

  • height:被提取的图像数据矩形区域的高度

返回一个 imageData 对象,用来描述 canvas 区域隐含的像素数据,这个区域通过像素表示,起点是( x , y ),宽高为 widht 和 height 。

imageData 对象包含三个属性:

  • imageData.height - 像素描述的矩形实际高度。

  • imageData.width - 像素描述的矩形实际宽度。

  • imageData.data - 包含 rgba 顺序数据的一个数组,数据使用0-255直接整数表示。

3.2、createImageData

使用语法:

createImageData( width , height )

创建一个空白的 imageData 对象,新对象的默认像素值 transparent black。对于imageData对象中的每个像素值,都存在 rgba 这四方面的信息,即:

  • r - 红色(0-255)

  • g - 绿色(0-255)

  • b - 蓝色(0-255)

  • a - alpha(0-255,0是透明,255是完全可见)

新对象默认像素值为(0,0,0,0)。

eg:如果我们想把 imageData 中一个像素变为红色时,可以改变第一和第四位信息,代码如下:

var imageData = ctx.createImageData(100,100)

imageData.data[0] = 255

imageData.data[1] = 0

imageData.data[2] = 0

imageData.data[3] = 255

3.1、putImageData

使用语法:

putImageData( imgData , x , y , dirtyX , dirtyY , dirtyWidth ,dirtyHeight );

参数及意义:

参数

描述

imgData

规定要放回画布的 ImageData 对象。

x

ImageData 对象左上角的 x 坐标,以像素计。

y

ImageData 对象左上角的 y 坐标,以像素计。

dirtyX

可选。水平值(x),以像素计,在画布上放置图像的位置。

dirtyY

可选。水平值(y),以像素计,在画布上放置图像的位置。

dirtyWidth

可选。在画布上绘制图像所使用的宽度。

dirtyHeight

可选。在画布上绘制图像所使用的高度。

通过 getImageData 复制的指定矩形像素数据,编辑之后,通过 putImageData 方法将图像数据放回画布上。

eg:添加滤镜效果:上述兔子是白色的变换成红色兔子,这时需要把绿色和蓝色都设置成0即可,代码如下:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6943.html
标签
评论
发布的文章

String转Json的几种方式

2024-05-09 11:05:04

iOS ------ JSONModel源码

2024-05-09 11:05:02

java去除 json 中的 \n, \t, \r

2024-05-09 11:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!