前言:
今天看官们对“html5canvas实例”大概比较关心,你们都需要剖析一些“html5canvas实例”的相关内容。那么小编在网摘上网罗了一些有关“html5canvas实例””的相关文章,希望咱们能喜欢,各位老铁们快快来了解一下吧!上一篇文章《HTML5(五)——Canvas API》介绍 canvas 绘制基本图形,这节开始介绍canvas的高级操作。
一、canvas 转换
canvas 转换常用的几种方法介绍,如下:
方法
描述
scale()
缩放当前绘图至更大或更小。
rotate()
旋转当前绘图。
translate()
重新映射画布上的 (0,0) 位置。
transform()
替换绘图的当前转换矩阵。
setTransform()
将当前转换重置为单位矩阵。然后运行 transform()。
1.1 、scale - 缩放
使用语法:scale(x,y)
x:表示水平方向的缩放倍数
y:表示垂直方向的缩放倍数
eg:canvas 绘制的矩形框放大两倍,代码如下:
var canvas = document.getElementById("canvas")var ctx = canvas.getContext("2d")ctx.scale(2,2)ctx.fillStyle="red"ctx.fillRect(0,0,200,200)
1.2、translate - 画布平移
使用语法:translate(x,y)
x:添加到水平坐标上的位置
y:添加到垂直坐标上的位置
设置之后开始绘制的图片位置从(x,y)算起。
eg:绘制两个一样的矩形,一个在平移前绘制,一个在平移后绘制,代码如下:
var canvas = document.getElementById("canvas")var ctx = canvas.getContext("2d")ctx.fillStyle="red" ctx.fillRect(0,0,200,200)//平移ctx.translate(200,200)ctx.fillRect(0,0,200,200)
运行结果如图:
1.3 、rotate - 旋转
使用语法:rotate(angle)
angle 旋转弧度,如果想使用角度,可以把角度转成弧度,公式为:deg * Path.PI/180。
eg:将一个矩形旋转45度,代码如下:
var canvas = document.getElementById("canvas")var ctx = canvas.getContext("2d")//旋转45度ctx.rotate(45*Math.PI/180)ctx.fillStyle="red"ctx.fillRect(0,0,200,200)
运行结果如图:
根据上述结果我们发现旋转的时候,默认原点是画布的起始点,我们想要的旋转是在矩形框中心为原点的旋转,此时我们需要借助上translate平移,重置一下原点,修改上述代码为:
<canvas width="400" height="400" id="canvas"></canvas>var canvas = document.getElementById("canvas")var ctx = canvas.getContext("2d")ctx.translate(200,200)ctx.rotate(45*Math.PI/180)ctx.translate(-200,-200)ctx.fillStyle="red"ctx.fillRect(100,100,200,200)
运行结果如图:
1.4、transform - 矩阵变换
使用语法:transform(a,b,c,d,e,f)
a:水平缩放b:水平倾斜c:垂直倾斜d:垂直缩放e:水平移动f:垂直移动
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(angle*Math.PI/180), Math.sin(angel*Math.PI/180), -Math.sin(angle*Math.PI/180), Math.cos(angle*Math.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,进行绘制图片的部分内容,实现如下效果:
给上述兔子顺便加一个点击屏幕暂停开始功能,完整代码如下:
<canvas width="400" height="400" id="canvas"></canvas><script> var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d") var img = new Image() let pause = false,frameCounter = 0,i=0; img.src = "./rotate.png" img.onload = function(){ requestAnimationFrame(next) }function next(){ ctx.clearRect(0,0,canvas.width,canvas.height) if(frameCounter%5 == 0){ //frameCounter 控制动画速度 i++ if(i==11)i=0 } ctx.drawImage(img, 0,i*240,240,240, 0,0,240,240) // 每张图片宽高都是240,具体参数根据图片而定 frameCounter ++ if(!pause)requestAnimationFrame(next) }window.onclick = function(){ pause = !pause next()}</script>
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] = 255imageData.data[1] = 0imageData.data[2] = 0imageData.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即可,代码如下:
<canvas width="400" height="400" id="canvas"></canvas><script> var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d") var img = new Image() let w = canvas.width,h = canvas.height; img.src = "./rotate.png" img.onload = function(){ ctx.drawImage(img,0,0,240,240,0,0,240,240) let imageData = ctx.getImageData(0,0,w,h) for(let r=0;r<w;r++){ for(let c=0;c<h;c++){ imageData.data[(r*w+c)*4+2 ] = 0 // 把蓝色设置成0 imageData.data[(r*w+c)*4+1] = 0 // 把蓝色设置成0 } } ctx.putImageData(imageData,0,0)}</script>
标签: #html5canvas实例