Canvas 樣式及顏色

fillstyle:填充色 fillstyle = color

**strokestyle描邊色**strokestyle = color

globalalpha:globalalpha = 0.2 ;

rgba():fillstyle = 『rgba(r,g,b,0.2)』;

區別：都可以作為做出透明度效果，但是從不同的樣式中有不同的優勢，global alpha 可以設定指定的透明度多層新增，而rgba動態的設定部分路徑的透明度。

linewidth :設定線條寬度 linewidth = 10;

之前提過預設寬度為2是錯誤的，預設寬度為1，但是由於從整數畫素點起向四周擴充0.5就導致了看似為2的效果，正確的解決方法應是從0.5畫素畫起；且線寬為奇數

butt:預設

round:圓滑，半徑 = 1/2 * 線寬

square:矩形，高 = 1/2 * 線寬

round:圓滑，半徑 = 1/2 * 線寬》bevel:受miterlimit影響

miter:預設，邊角互連。

setlinedash():返回乙個包含當前虛線樣式，長度為非負的陣列: getlinedash([5,2]);

linedashoffset:設定虛線的起始偏移量 linedashoffset = 1;

//線性漸變

var lineargradient = ctx.createlineargradient(0,0,150,150);
lineargradient.addcolorstop(0,'white');
lineargradient.addcolorstop(1,'black');
ctx.fillstyle = lineargradient;
//徑向漸變
var radialgradient = ctx.createradialgradient(75,75,0,75,75,100);
radialgradient .addcolorstop(0, '#ff5f98');
radialgradient .addcolorstop(0.75, '#ff0188');
radialgradient .addcolorstop(1, 'rgba(255,1,136,0)')
ctx.fillstyle = radialgradient ;

createpattern（image，type）;

type:

repeat

repeat-x

repeat-y

no-repeat

例項

var img = new image();

img.src = 'images/wall*****.png';
img.onload = function
()

shadowoffsetx = float

shadowoffsetx 和 shadowoffsety 用來設定陰影在 x 和 y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們預設都為 0。

shadowoffsetx 和 shadowoffsety 用來設定陰影在 x 和 y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們預設都為 0。

shadowblur = float

shadowblur 用於設定陰影的模糊程度，其數值並不跟畫素數量掛鉤，也不受變換矩陣的影響，預設為 0。

shadowcolor = color

shadowcolor 是標準的 css 顏色值，用於設定陰影顏色效果，預設是全透明的黑色。

文字陰影的例子

這個例子繪製了帶陰影效果的文字。

function

draw
()

nonzero :預設

evenodd : even-odd rule:奇偶規則。該演算法在基於向量的圖形軟體中實施。它決定如何與多於乙個的閉合輪廓的圖形的形狀將被填充，

奇數：內部填充

偶數：外部填充

canvas 閉合 canvas 線的樣式

線的樣式在canvas中分為輪廓顏色 以及線型的樣式 strokestyle color 設定描邊輪廓的顏色ctx.linecap butt 預設 正常 屬性值 round 多出半圓 square 多出方形 ctx.linewidth 20 ctx.strokestyle red 線帽 線的兩端的樣...

Canvas教程一 基本使用及樣式建立

新增樣式及顏色 注意事項及踩坑記錄 1.建立畫布var canvas document.getelementbyid canvas if canvas.getcontext eles2.繪製矩形ctx.fillstyle rgba 200,0,0 ctx.fillrect 0 0,55 50 ctx...

canvas漸進顏色的解釋

注釋 1 cxt.createlineargradient xstart ystart xend yend xstart為漸變起始地點的橫座標，ystart為漸變起始地點的縱座標 xend為漸變結束地點的橫座標 yend為漸變結束地點的縱座標。2 cxt.addcolorstop offset co...