canvas繪製時的顏色與透明度

2021-07-02 05:29:09 字數 1095 閱讀 3079

一 指定css樣式顏色和透明度的方式

1 #ffffff(白色)  用16進製表示

2 rgb(red/green/blue,紅/綠/藍)

從表中我們可以得到規律:顏色的hex到rgb的轉換,例如aqua值是#00ffff,00-->0,ff-->255(ff=15*16+15*1)

3 rgba(red/green/blue/alpha,紅/綠/藍/透明度)

透明度的值是從0到1,0是全透明,1是完全不透明

4 hls(hue/saturation/lightness,色相/飽和度/亮度)

css3的規範中增加了hsl的支援,主要是rgb存在著兩個缺陷,硬體為先導和不直觀

具體相關資訊可以查閱 下的hsl example

5 hls(hue/saturation/lightnes/alpha,色相/飽和度/亮度/透明度)

二:示例:

js**如下

var canvas = document.getelementbyid('canvas2');

context = canvas.getcontext('2d');

context.font ='20px arisal';

context.filltext('隱藏部分,透明部分',150,150);

context.linewidth =20;

context.strokestyle = 'blue';

context.strokerect(100,100,100,100);

context.fillstyle = 'rgba(0,0,255,0.3)';

context.fillrect(220,80,140,140);

結果如圖

canvas繪製圓心扇形可組成顏色隨機的七色小花

啊 現在應該還是春天吧 心情一如既往的煩悶吶 最近做了乙個canvas的扇形繪製的東西 把它整理出來變成乙個適合春天的花朵繪製 沉悶的工作環境已經讓我這種有趣的人也變成了無聊鬼怪呢。下次一定想找乙個年輕的明亮的有意思的技術環境 隨機顏色函式參考 最終實現圖 怎麼樣 還可以吧 七色花有些顏色相近是因為...

canvas繪製乙個漸變顏色的矩形

lang en charset utf 8 titletitle canvas lineargradient style head class lineargradient div width 600 height 400 canvas var mycanvas document.querysele...

Canvas繪製原型與線型

1.圓形繪製 畫家.arc 圓心x,圓心y,圓弧半徑r,開始弧度,結束弧度,false 畫家.arc 圓心x,圓心y,圓弧半徑,結束弧度,開始弧度,true 說明 弧度不是角度。0 2 math.pi ps false先開始後結束,如果是true是先結束後開始 pss 都是順時針畫弧 2.線形 1 ...