Trip to Canvas(3)

上一篇文章中简单的举了几个canvas处理图片的例子，这里对canvas的色彩处理进一步学习。

IE8或以下不支持！

色彩

透明度

var ctx = document.getElementById('canvas3').getContext('2d');
// draw background
ctx.fillStyle = '#FD0';
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = '#09F';
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = '#F30';
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = '#FFF';
// set transparency value
ctx.globalAlpha = 0.3;
for (var i = 0; i < 7; i++) {
ctx.beginPath();
ctx.arc(40, 50, 5 + 5 * i, 0, Math.PI, true);
ctx.arc(110, 50, 5 + 5 * i, 0, Math.PI, true);
ctx.arc(75, 50, 10 + 10 * i, 0, Math.PI, false);
ctx.fill();
}

Run

使用rgba

Repeat the images:

var ctx = document.getElementById('canvas4').getContext('2d');
// Draw background
ctx.fillStyle = '#ffdd00';
ctx.fillRect(0, 0, 250, 37.5);
ctx.fillStyle = '#66cc00';
ctx.fillRect(0, 37.5, 250, 37.5);
ctx.fillStyle = '#0099ff';
ctx.fillRect(0, 75, 250, 37.5);
ctx.fillStyle = '#ff3300';
ctx.fillRect(0, 112.5, 250, 37.5);
// Draw semi transparent rectangles
for (var i = 0; i < 10; i++) {
ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')';
for (var j = 0; j < 4; j++) {
ctx.fillRect(5 + i * 24, 5 + j * 37.5, 24, 27.5)
}
}

Run

线条连接

var ctx = document.getElementById('canvas5').getContext('2d');
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 10;
for (var i = 0; i < lineJoin.length; i++) {
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(-5, 5 + i * 40);
ctx.lineTo(35, 45 + i * 40);
ctx.lineTo(75, 5 + i * 40);
ctx.lineTo(115, 45 + i * 40);
ctx.lineTo(155, 5 + i * 40);
ctx.stroke();
}

Run

字体阴影效果

var ctx = document.getElementById('canvas8').getContext('2d');
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 3;
ctx.shadowColor = "rgba(255, 0, 0, 0.5)";
ctx.font = "40px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 5, 30);

Run