颜色合成 globalCompositeOperation 属性:
1
2
3
4
5
6
7
8
9
10
11
|
//先绘制一个图形。
ctx.fillStyle =
"#00ff00"
;
ctx.fillRect(10,10,50,50);
//设置 lobalCompositeOperation 属性。
ctx.globalCompositeOperation =
"source-over"
;
//source-over:新图像绘制于画布已由图像上方。 //默认
//绘制一个新图像。
ctx.beginPath();
ctx.fillStyle =
"#ff0000"
;
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();
|
1
2
|
ctx.globalCompositeOperation =
"copy"
;
//copy:只图像绘新图像,删除其它图像。
|
1
2
|
ctx.globalCompositeOperation =
"darker"
;
//darker:在图形重叠的地方,其颜色由两个颜色值相减之后决定。
|
1
2
|
ctx.globalCompositeOperation =
"destination-atop"
;
//destination-atop:画布上已有的内容只会在它和新图像重叠的地方保留。
|
1
2
|
ctx.globalCompositeOperation =
"destination-in"
;
//destination-in:画布上已有的内容和新图像重叠的地方,保留已有的内容。
|
1
2
|
ctx.globalCompositeOperation =
"destination-out"
;
//destination-in:画布上已有的内容和新图像不重叠的地方,保留已有的内容。
|
1
2
|
ctx.globalCompositeOperation =
"destination-over"
;
//destinationo-ver:新图像绘制在已由图像下面。
|
1
2
|
ctx.globalCompositeOperation =
"lighter"
;
//darker:在图形重叠的地方,其颜色由两个颜色值相加之后决定。
|
1
2
|
ctx.globalCompositeOperation =
"source-atop"
;
//source-atop:在与已有图形重叠的地方,才显示的绘制新图像。
|
1
2
|
ctx.globalCompositeOperation =
"source-ind"
;
//source-in:在与已有图形重叠的地方,才显示的绘制新图像 ,忽略原有图像。
|
1
2
|
ctx.globalCompositeOperation =
"source-out"
;
//source-out:在与已有图形不重叠的地方,才显示绘制的新图像。
|
1
2
|
ctx.globalCompositeOperation =
"xor"
;
//xor:在重叠和正常绘制的其它地方的地方,图像都为透明。
|
颜色反转 :
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
img =
new
Image();
img.src=
"face.jpg"
;
img.onload =
function
() {
ctx.drawImage(img,0,0);
var
imageData = ctx.getImageData(0,0,250,250);
var
pix = imageData.data;
for
(
var
i = 0 , n = pix.length;i<n;i += 4 ) {
pix[i] = 255-pix[i];
pix[i+1] = 255-pix[i+1];
pix[i+2] = 255 -pix[i+2];
}
ctx.putImageData(imageData,250,0);
}
|
阴影效果:
1
2
3
4
5
6
7
8
9
|
ctx.shadowColor =
"#f00"
;
//设置阴影颜色
ctx.shadowBlur=10;
//设置阴影的羽化量
ctx.shadowOffsetX = 20;
//设置阴影X 坐标移动量
ctx.shadowOffsetY = 30;
//设置阴影Y 坐标移动量
var
img =
new
Image();
img.src=
"face.jpg"
;
img.onload =
function
() {
ctx.drawImage(img,0,0);
}
|
自定义画板:
- 建立画板
1234567891011121314151617181920212223242526272829303132333435363738394041
var
canvas = document.getElementById(
"myCanvas"
)
var
ctx = canvas.getContext(
"2d"
);
//绘制一个黑色矩形为画板
ctx.fillStyle=
"black"
;
ctx.fillRect(0,0,600,300);
//定义一些标记
var
onoff =
false
;
//变量onoff 为判断是否按下鼠标
var
oldx = -10;
//由于鼠标是有大小的,这里减去 10.
var
oldy = -10;
var
linecolor =
"white"
;
//线条颜色
var
linw =4;
//线条宽度
//添加鼠标事件
canvas.addEventListener(
"mousemove"
,draw,
true
);
//注意鼠标事件是在画布“ canvas”上
的
canvas.addEventListener(
"mousedown"
,dowm,
false
);
canvas.addEventListener(
"mouseup"
,up,
false
);
//分别定义三个事件函数
function
dowm(event) {
onoff =
true
;
//设置为true,用于判断
oldx = event.pageX-10;
//jQuery 事件(event)pageX 属性:
oldy = event.pageY-10;
}
function
up() {
onoff =
false
;
}
function
draw(event) {
if
(onoff ==
true
) {
var
newx = event.pageX-10;
//实时取得新的坐标
var
newy = event.pageY-10;
ctx.beginPath();
ctx.moveTo(oldx,oldy);
ctx.lineTo(newx,newy);
ctx.strokeStyle = linecolor;
ctx.lineWidth = linw;
ctx.lineCap=
"round"
;
ctx.stroke();
oldx = newx;
//在移动的过程中上一时新坐标变为下一时老坐标
oldy = newy;
};
}
- 完整画板与导出功能:
123456789
//添加按钮
<butto style=
"width:80px;background-color:yellow;"
onclick=
'linecolor="yellow";'
>YELLOW</button>
//注意这里 onclick 为单引号。
//建立以个 <img>标签,在用 toDataURL 函数导出内容
//添加代码段
function
copyimage(event) {
var
image_pgn_src = canvas.toDataURL(
"image/pgn"
);
document.getElementById(
"image_pgn"
).src = image_pgn_src;
}