学步园

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

IE8或以下不支持！ 

 

色彩

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

 

fillRect改成Arc呢?

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

Run

 

使用渐变色呢?

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

Run

 

另外一种用法?

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

Run

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

透明度

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

使用rgba

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

线条连接

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

字体阴影效果

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