HTML5Canvas繪制時(shí)如何指定顏色與透明度-創(chuàng)新互聯(lián)

這篇“HTML5 Canvas繪制時(shí)如何指定顏色與透明度”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“HTML5 Canvas繪制時(shí)如何指定顏色與透明度”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過(guò)這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。

10余年的寧化網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整寧化建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“寧化網(wǎng)站設(shè)計(jì)”,“寧化網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

html是什么

html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

指定顏色

黑色是Canvas繪制的默認(rèn)色彩，要想換一種顏色的話，就得在實(shí)際畫之前指定顏色。

JavaScript Code復(fù)制內(nèi)容到剪貼板

ctx.strokeStyle = color

指定繪制線的顏色：

JavaScript Code復(fù)制內(nèi)容到剪貼板

ctx.fillStyle = color

指定填充的顏色：

來(lái)看看實(shí)際的例子：

JavaScript

JavaScript Code復(fù)制內(nèi)容到剪貼板

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();   
}

效果如下圖：
HTML5 Canvas繪制時(shí)如何指定顏色與透明度

指定透明度

和普通的CSS中一樣，我們指定顏色的時(shí)候還可以帶一個(gè)alpha值（不過(guò)用的不多，IE9之前都不支持）。看代碼：

JavaScript

JavaScript Code復(fù)制內(nèi)容到剪貼板

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é)果就是下面這樣：
HTML5 Canvas繪制時(shí)如何指定顏色與透明度

和上面的代碼基本沒變化，就是把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的神奇之處~

JavaScript Code復(fù)制內(nèi)容到剪貼板

<!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>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！   
    </canvas>   
</p>   
<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é)果：
HTML5 Canvas繪制時(shí)如何指定顏色與透明度

感謝你的閱讀，希望你對(duì)“HTML5 Canvas繪制時(shí)如何指定顏色與透明度”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：HTML5Canvas繪制時(shí)如何指定顏色與透明度-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://muchs.cn/article48/dsghhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、響應(yīng)式網(wǎng)站、全網(wǎng)營(yíng)銷推廣、外貿(mào)建站、網(wǎng)站改版、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容