詳解HTML5 Canvas繪制時(shí)指定顏色與透明度的方法
我要評(píng)論指定顏色
黑色是Canvas繪制的默認(rèn)色彩，要想換一種顏色的話，就得在實(shí)際畫之前指定顏色。
- ctx.strokeStyle = color
指定繪制線的顏色：
- ctx.fillStyle = color
指定填充的顏色：
來(lái)看看實(shí)際的例子：
JavaScript
- onload = function() {
- draw();
- };
- function draw() {
- var canvas = document.getElementById('c1');
- if ( ! canvas || ! canvas.getContext ) { return false; }
- var ctx = canvas.getContext('2d');
- ctx.beginPath();
- ctx.fillStyle = 'rgb(192, 80, 77)'; // 紅
- ctx.arc(70, 45, 35, 0, Math.PI*2, false);
- ctx.fill();
- ctx.beginPath();
- ctx.fillStyle = 'rgb(155, 187, 89)'; // 綠
- ctx.arc(45, 95, 35, 0, Math.PI*2, false);
- ctx.fill();
- ctx.beginPath();
- ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
- ctx.arc(95, 95, 35, 0, Math.PI*2, false);
- ctx.fill();
- }
效果如下圖：
指定透明度
和普通的CSS中一樣，我們指定顏色的時(shí)候還可以帶一個(gè)alpha值（不過(guò)用的不多，IE9之前都不支持）?？创a：
JavaScript
- onload = function() {
- draw();
- };
- function draw() {
- var canvas = document.getElementById('c1');
- if ( ! canvas || ! canvas.getContext ) { return false; }
- var ctx = canvas.getContext('2d');
- ctx.beginPath();
- ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; //
- ctx.arc(70, 45, 35, 0, Math.PI*2, false);
- ctx.fill();
- ctx.beginPath();
- ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; //
- ctx.arc(45, 95, 35, 0, Math.PI*2, false);
- ctx.fill();
- ctx.beginPath();
- ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; //
- ctx.arc(95, 95, 35, 0, Math.PI*2, false);
- ctx.fill();
- }
結(jié)果就是下面這樣：
和上面的代碼基本沒(méi)變化，就是把rgb(r, g, b)變成了rgba(r, g, b, a)而已，a的值也是0~1，0表示完全透明，1則是完全不透明（所以alpha的值實(shí)際上是“不透明度”）。
全局透明globalAlpha
這個(gè)也是很簡(jiǎn)單的一個(gè)屬性，默認(rèn)值為1.0，代表完全不透明，取值范圍是0.0（完全透明）~1.0。這個(gè)屬性與陰影設(shè)置是一樣的，如果不想針對(duì)全局設(shè)置不透明度，就得在下次繪制前重置globalAlpha。
總結(jié)一下：基于狀態(tài)的屬性有哪些？
——globalAlpha
——globalCompositeOpeartion
——strokeStyle
——textAlign,textBaseline
——lineCap,lineJoin,lineWidth,miterLimit
——fillStyle
——font
——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
我們通過(guò)一個(gè)代碼，來(lái)體驗(yàn)一下globalAlpha的神奇之處~
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>全局透明</title>
- <style>
- body { background: url("./images/bg3.jpg") repeat; }
- #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
- </style>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas">
- 你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧?。?
- </canvas>
- </div>
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
- context.fillStyle = "#FFF";
- context.fillRect(0,0,800,600);
- context.globalAlpha = 0.5;
- for(var i=0; i<=50; i++){
- var R = Math.floor(Math.random() * 255);
- var G = Math.floor(Math.random() * 255);
- var B = Math.floor(Math.random() * 255);
- context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
- context.beginPath();
- context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);
- context.fill();
- }
- };
- </script>
- </body>
- </html>
運(yùn)行結(jié)果：
是不是非常的酷？終于有點(diǎn)藝術(shù)家的范兒了吧。
相關(guān)文章
移動(dòng)端HTML5實(shí)現(xiàn)文件上傳功能【附代碼】
下面小編就為大家?guī)?lái)一篇移動(dòng)端HTML5實(shí)現(xiàn)文件上傳功能【附代碼】。小編覺(jué)得聽(tīng)錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-25深入研究HTML5實(shí)現(xiàn)圖片壓縮上傳功能
下面小編就為大家?guī)?lái)一篇深入研究HTML5實(shí)現(xiàn)圖片壓縮上傳功能。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家。也給大家一個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-03-25- 下面小編就為大家?guī)?lái)一篇HTML5觸摸事件演化tap事件介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家一個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-25
jQuery+html5實(shí)現(xiàn)企業(yè)年會(huì)數(shù)字抽獎(jiǎng)特效源碼
jQuery+html5實(shí)現(xiàn)企業(yè)年會(huì)數(shù)字抽獎(jiǎng)特效源碼是一款基于jQuery+HTML5實(shí)現(xiàn)的企業(yè)年會(huì)電子數(shù)字抽獎(jiǎng)代碼。需要的朋友前來(lái)下載源碼2016-03-25- 下面小編就為大家分享一篇html5生成柱狀圖(條形圖)效果的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家一個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-25
- 下面小編就為大家?guī)?lái)一篇用html5繪制折線圖的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家。也給大家一個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-25
實(shí)例講解使用HTML5 Canvas繪制陰影效果的方法
這篇文章主要介紹了使用HTML5 Canvas繪制陰影效果的方法,包括一個(gè)3D拉影+邊緣模糊效果文字的編寫例子,在陰影效果的利用上進(jìn)一步深入,需要的朋友可以參考下2016-03-25移動(dòng)web模擬客戶端實(shí)現(xiàn)多方框輸入密碼效果【附代碼】
下面小編就為大家?guī)?lái)一篇移動(dòng)web模擬客戶端實(shí)現(xiàn)多方框輸入密碼效果【附代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家。也給大家一個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-25
