canvas学习（二）
2016-06-08 本文已影响604人
小pxu
思维导图
一、图像合并
两个重要概念
目标图像：已有图形
源图像：即将绘制的图形
一行重要代码
context.globalCompositeOperation = ""
此行代码之后的是源图像，之前的是目标图像
源图像操作：
source-over：源图形显示在目标图像之上，且全部显示
source-atop：源图形显示在目标图形的上方，超出目标图像部分不显示
source-in：只显示源图形在目标图形中的部分
source-out：只显示源图形在目标图形外的部分
实例：
//目标图像（蓝色）
context.beginPath();
context.fillStyle = 'skyblue';
context.fillRect(50,50,100,100);
context.globalCompositeOperation = "source-xxx"
//源图像（粉色）
context.fillStyle = 'pink';
context.arc(150,150,50,0,Math.PI * 2,true)
context.fill();
源图像操作
源图像操作：
destination-over：目标图形显示在源图像之上，且全部显示
destination-atop：目标图形显示在源图形的上方，超出源图形部分不显示
destination-in：只显示目标图形在源图形中的部分
destination-out：只显示目标图形在源图形外的部分
实例：
//目标图像（蓝色）
context.beginPath();
context.fillStyle = 'skyblue';
context.fillRect(50,50,100,100);
context.globalCompositeOperation = "destination-xxx"
//源图像（粉色）
context.fillStyle = 'pink';
context.arc(150,150,50,0,Math.PI * 2,true)
context.fill();
目标像操作
其他操作
lighter：重叠部分，颜色的rgb混合处理；数值相加，超出255以255处理
copy：只显示源图形，不显示目标图形
xor：不显示重合部分
实例：
//目标图像（蓝色）
context.beginPath();
context.fillStyle = 'skyblue';
context.fillRect(50,50,100,100);
context.globalCompositeOperation = "xxx"
//源图像（粉色）
context.fillStyle = 'pink';
context.arc(150,150,50,0,Math.PI * 2,true)
context.fill();
其他操作
二、图片绘制
1、新建图片对象，并将其src属性设置为图片路径
var img = new Image();
img.src = "http://img3.imgtn.bdimg.com/it/u=1011179444,2282576107&fm=21&gp=0.jpg";
2、将绘制代码放在img.onload中，让绘制在图片加载完后执行
img.onload = function () {
context.drawImage(img,50,50);
}
3、绘制方式，一共9个属性，这里分三段理解
drawImage(img,x,y)：必选属性，第一参数为图片对象名称，后两个为绘图位置（图片左上角在画布中的坐标）
//画布300*300，图片200*200
var img = new Image();
img.src = "http://img3.imgtn.bdimg.com/it/u=1011179444,2282576107&fm=21&gp=0.jpg";
context.beginPath();
img.onload = function () {
context.drawImage(img,50,50);
}
定位
drawImage(img,x,y,w,h)：后面加两个属性是自定义图片的大小
//画布300*300，图片200*200
var img = new Image();
img.src = "http://img3.imgtn.bdimg.com/it/u=1011179444,2282576107&fm=21&gp=0.jpg";
context.beginPath();
img.onload = function () {
context.drawImage(img,0,0,300,300);
}
自定义大小
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y, width,height)：中间加入的四个属性，是表示图片截取的位置，矩形起点、终点、长、宽
//画布300*300，图片200*200
var img = new Image();
img.src = "http://img3.imgtn.bdimg.com/it/u=1011179444,2282576107&fm=21&gp=0.jpg";
context.beginPath();
img.onload = function () {
context.drawImage(img,100,0,200,200,75,0,300,300);
}
截取
clip：类似于css3的蒙版遮罩效果，只显示clip图形内的图片
context.beginPath();
context.lineWidth = 5;
context.arc(150,150,150,0,Math.PI*2,true);
context.stroke();
context.clip()
context.beginPath();
img4.onload = function () {
context.drawImage(img,0,0,300,300);
}
遮罩
三、图片像素处理
PS1: 此处注意，sublime编辑器是无法获取图片像素信息的，好像是牵涉到跨域的问题，会出现以下报警；用Hbuilder就可以正常使用（改到127开头的内部服务器）
PS2：图片请使用本地连接，用网络图片也是以下报警
sublime报警
获取图片信息getImageData(x,y,w,h)
getImageData(x,y,w,h)：x,y是起始坐标，w,h是获取的长宽
- 获取出来的信息是一个包含各像素rgba值的数组CanvasPixeArray
- 因为每个像素包含rgba这4个值，所以每个像素占据数组中的4个位置，也就是
[r1,g1,b1,a1,r2,g2,b2,a2,r3,g3,b3,a3...]这样一直排列下去 - 所以数组的长度
length = w * h * 4 - 在循环数组获取每个元素的时候，一般是要让i+=4这样获取每个像素
下面是一个实例，用的图片是200*200大小
//引用图片
context.beginPath()
var image = new Image();
image.src = "123.jpg";
image.onload = function () {
context.drawImage(image,0,0);
}
//获取图片信息
var imageData = context.getImageData(0,0,200,200);
数组展开1
数组展开2
将修改完的像素重新绘制putImageData(x,y,w,h)
putImageData(x,y,w,h)：x,y是起始坐标，w,h是获取的长宽
PS：其中如果重绘区域与原图片重叠，会将原图片部分覆盖
灰度效果
- 在rgba表示中，rgb值相同就一定是灰色
- 获取每个像素的rgba值并将rgb值改为
gray = (r+g+b)/3 - 重绘像素
//灰度处理
var imageData = context.getImageData(0,0,200,200);
var data = imageData.data;
for (var i = 0; i<200*200*4; i+=4){
var r = data[i];
var g = data[i+1];
var b = data[i+2];
var gray = (r+g+b)/3;
data[i] = gray; //r值
data[i+1] = gray; //g值
data[i+2] = gray; //b值
}
context.putImageData(imageData,200,0)
反色效果
- 在rgba表示中，rgb反色就是用255减去相应的数值
- 获取每个像素的rgba值并将rgb值改为
data[i] = 255-data[i] - 重绘像素
//反色处理
var imageData = context.getImageData(0,0,200,200);
var data = imageData.data;
for (var j = 0; j<200*200*4; j+=4){
data[j] = 255-data[j];
data[j+1] = 255-data[j+1];
data[j+2] = 255-data[j+2];
}
context.putImageData(imageData,0,200);
切割效果
- 像素的a值改为0就会成为透明，即显示底部白色
- 获取每个像素的rgba值
- 循环获取相应行列的像素
- 将这些像素的a值改为0
- 重绘像素
var imageData = context.getImageData(0,0,200,200);
var data = imageData.data;
var w = 200;
var space = Math.ceil(200/3);
console.log(space);
for (var i1 = space; i1<w; i1+=space){
for (var i2 = 0; i2<w; i2++) {
var n1 = i2*w+i1
data[4*n1+3] = 0;
}
}
for (var j1 = space; j1<w; j1+=space){
for (var j2 = 0; j2<w; j2++) {
var n2 = j1*w+j2
data[4*n2+3] = 0;
}
}
context.putImageData(imageData,200,200);
效果展示
四、视频绘制
使用方法：drawImage(video,x,y,w,h)
使用的方法其实与图片绘制相同，就是将image对象换成vidoe
- 创建一个
<video src="" autoplay="auto"></video>标签，并加上src属性 - 将canvas大小设置为与视频相同
- 用
drawImage(video,x,y,w,h)将视频绘制到画布 - 让video标签消失，只剩下canvas
- 设置定时器播放动画（高于26帧基本就看不到卡顿了）
视频1
视频2
下面是实例演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
box-shadow: 0 5px 20px black;
}
//让video标签消失
video{
display: none;
}
</style>
</head>
<body>
<video id="video" src="html.mp4" autoplay="auto"></video>
<canvas id="canvas" width="672" height="378"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
function drawFrame () {
context.drawImage(video,0,0,canvas.width,canvas.height);
}
var timer = setInterval(function(){
drawFrame();
}, 50)
</script>
</html>
五、图形输出
ps：也是要用Hbuilder打开的，图片用本地连接
输出：toDateURL()
var url = canvas.toDateURL()
显示：
//这是打开网页直接显示
window.location.herf = url
//当然也可以这样，点击a标签后图片就会以图片形式展现而非网页形式
var a = document.getElementById('a1');
a.href = url;
图形输出1
图形输出2
