canvas学习（二）

思维导图

一、图像合并

两个重要概念

目标图像：已有图形

源图像：即将绘制的图形

一行重要代码

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是获取的长宽

1. 获取出来的信息是一个包含各像素rgba值的数组CanvasPixeArray
2. 因为每个像素包含rgba这4个值，所以每个像素占据数组中的4个位置，也就是[r1,g1,b1,a1,r2,g2,b2,a2,r3,g3,b3,a3...]这样一直排列下去
3. 所以数组的长度length = w * h * 4
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：其中如果重绘区域与原图片重叠，会将原图片部分覆盖

灰度效果

1. 在rgba表示中，rgb值相同就一定是灰色
2. 获取每个像素的rgba值并将rgb值改为 gray = (r+g+b)/3
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)

反色效果

1. 在rgba表示中，rgb反色就是用255减去相应的数值
2. 获取每个像素的rgba值并将rgb值改为 data[i] = 255-data[i]
3. 重绘像素

---

//反色处理
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);

切割效果

1. 像素的a值改为0就会成为透明，即显示底部白色
2. 获取每个像素的rgba值
3. 循环获取相应行列的像素
4. 将这些像素的a值改为0
5. 重绘像素

---

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

1. 创建一个<video src="" autoplay="auto"></video>标签，并加上src属性
2. 将canvas大小设置为与视频相同
3. 用drawImage(video,x,y,w,h)将视频绘制到画布
4. 让video标签消失，只剩下canvas
5. 设置定时器播放动画（高于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