Trip to Canvas(3)

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

IE8或以下不支持！ 

 

色彩

var ctx = document.getElementById('canvas1').getContext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)'; ctx.fillRect(j * 25, i * 25, 25, 25); } }
Run

 

fillRect改成Arc呢?

var ctx = document.getElementById('canvas2').getContext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ')'; ctx.beginPath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); ctx.stroke(); } }

Run

 

使用渐变色呢?

var ctx = document.getElementById('canvas7').getContext('2d'); // Create gradients var lingrad = ctx.createLinearGradient(0, 0, 150, 150); lingrad.addColorStop(0, 'red'); lingrad.addColorStop(0.5, '#fff'); lingrad.addColorStop(0.5, '#fff'); lingrad.addColorStop(1, 'blue'); var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95); lingrad2.addColorStop(0.5, '#000'); lingrad2.addColorStop(1, 'red'); // assign gradients to fill and stroke styles ctx.fillStyle = lingrad; ctx.strokeStyle = lingrad2; // draw shapes ctx.fillRect(10, 10, 130, 130); ctx.strokeRect(50, 50, 50, 50);

Run

 

另外一种用法?

var ctx = document.getElementById('canvas10').getContext('2d'); // Create gradients var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30); radgrad.addColorStop(0, '#FFF'); radgrad.addColorStop(0.9, '#666'); radgrad.addColorStop(1, 'rgba(1,159,98,0)'); ctx.fillStyle = radgrad; ctx.fillRect(0, 0, 150, 150);

Run

添加到4个球(效果如下图, 也可以点击RunCode)：

透明度

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