--- 内嵌图像
- drawImage可以绘制图像
context.drawImage(image,dx,dy)
context.drawImage(image,dx,dy,dw,dh)
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
- 基本绘制 图片根据尺寸自动截取左上角
image.onload = function(){
context.drawImage(image,0,0)
}
- 自动调整 调整图片加载尺寸
image.onload = function(){
context.drawImage(image,0,0,600,400);
}
- 选择一部分区域贴到目标区域
image.onload = function(){
context.drawImage(image,0,0);
context.drawImage(image,620,300,300,375,390,10,200,250);
}
---- 绘制像素
- getImageData() // 获取一个Canvas的像素数组
- putImageData() // 将ImageData写入到Canvas中
- createImageData() // 创建一个ImageData
- ImageData对象
context.filStyle = 'navy';
context.fillRect(0,0,1,1);
context.fillStyle = 'teal';
context.fillRect(1,0,1,1);
context.fillStyle = 'lime';
context.fillRect(0,1,1,1);
context.fillStyle = 'yellow';
context.fillRect(1,1,1,1); ImageData = context.getImageData(0,0,canvas.width,canvas.heigt);
- ImageData.width // 图像宽度
- ImageData.heigth // 图像高度
- ImageData.data // 图像信息
for(var i=0; i<ImageData.data.length; i+= 4)
{
var r = ImageData.data[i];
var g = ImageData.data[i+1];
var b = ImageData.data[i+2];
var a = ImageData.data[i+3];
alert(r+" "+g+" "+b+" "+a);
}
---- 修改像素
- 使用putImageData回写
for (var i=0; i<ImageData.data.length; i+=4)
{
ImageData.data[i] = parseInt(Math.random()*255);
ImageData.data[i+1] = parseInt(Math.random()*255);
ImageData.data[i+2] = parseInt(Math.random()*255);
} context.putImageData(ImageData,dx,dy,[dirtyX,dirtY,dirtyWidth,dirtyHeight])
---- 创建ImageData
var imagedata = context.createImageData(2,2);
for(var i=0; i<ImageData.data.length; i+=4){
imagedata.data[i] = parseInt(Math.random()*255);
imagedata.data[i+1] = parseInt(Math.random()*255);
imagedata.data[i+2] = parseInt(Math.random()*255);
}
context.putImageData(imagedata,0,0);
---- 操作像素
var image = new Image();
image.src = 'images/yosemite.jpg';
image.onload = function() {
context.drawImage(image,0,0,360,240);
var modified = context.createImag eData(360,240);
var imagedata = context.getImageData(0,0,360,240);
for (var i=0; i<imagedata.data.length; i+=4) {
var rgba = grayLuminosity(
imagedata.data[i+0],
imagedata.data[i+1],
imagedata.data[i+2],
imagedata.data[i+3]
);
modified.data[i+0] = rgba[0];
modified.data[i+1] = rgba[1];
modified.data[i+2] = rgba[2];
modified.data[i+3] = rgba[3];
}
context.putImageDa ta(modified,0,0);
};
----- 滤镜效果代码
var grayLightness = function(r,g,b,a) {
var val = parseInt(
(Math.max(r,g,b)+Math.min(r,g,b))*0.5
);
return [val,val,val,a];
};
var grayLuminosity = function(r,g,b,a) {
var val = parseInt(
(r*0.21)+(g*0.71)+(b*0.07)
);
return [val,val,val,a];
};
var grayAverage = function(r,g,b,a) {
var val = parseInt((r+g+b)/3.0
);
return [val,val,val,a];
};
var sepiaTone = function(r,g,b,a) {
var rS = (r*0.393)+(g*0.769)+(b*0.189);
var gS = (r*0.349)+(g*0.686)+(b*0.168);
var bS = (r*0.272)+(g*0.534)+(b*0.131);
return [
(rS>255) ? 255 : parseInt(rS),
(gS>255) ? 255 : parseInt(gS),
(bS>255) ? 255 : parseInt(bS),a];
};
var invertColor = function(r,g,b,a) {
return [
(255‐r),
(255‐g),
(255‐b),a];
};
var swapChannels = function(r,g,b,a,order) {
var rgba = [r,g,b,a];
return [
rgba[order[0]],
rgba[order[1]],
rgba[order[2]],
rgba[order[3]]];
};
var monoColor = function(r,g,b,a,color) {
return [
color[0],
color[1],
color[2],
255 ‐(parseInt((r+g+b)/3.0))];
};
----- 合成影像
- 当图形重叠时的绘制方法
context.globalCompositeOperation = 'source-over';
属性：
source-over/source-in/source-out/source-atop
destination-over/destination-in/destination-out/destination-atop
lighter/copy/xor
----- Patterns 复用模式
- createPattern()类似于drawImage()
context.createPattern(image,repetition)
- 复用模式
var cvs = document.createElement("CANVAS");
cvs.width = 20;
cvs.height = 20;
var ctx = cvs.getContext('2d');
ctx.fillStyle = 'lime';
ctx.fillRect(0,0,10,10);
ctx.fillRect(10,10,10,10);
ctx.fillStyle = 'green';
ctx.fillRect(10,0,10,10);
ctx.fillRect(0,10,10,10);
context.fillStyle = context.createPattern(cvs,'repeat');
context.fillRect(0,0,220,220);