使用樣式和顏色
色彩 colors
如果想要給圖形上色，有兩個重要的屬性可以做到：fillStyle 和 strokeStyle。
fillStyle = color
設置圖形的填充顏色。
strokeStyle = color
設置圖形輪廓的顏色。
color可以是表示css顏色值的字符串，漸變對象或者圖案對象。默認情況下，線條和填充顏色都是黑色的（#000000）。
下面的例子表示的都是同一種例子:
//這些fillStyle的值均為‘橙色’
ctx.fillStyle = 'orange'
ctx.fillStyle = '#ffa500'
ctx.fillStyle = 'rgb(255,165,0)'
ctx.fillStyle = 'rbga(155,165,0,1)'
fillStyle 示例
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
利用兩層for循環來繪制方格列陣，每個方格不同的顏色。通過每次循環都設置不同的fillStyle 的值。
strokeStyle 示例
同fillStyle的示例相似，通過循環來變換 strokeStyle 的值。
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ',0)';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true)
ctx.stroke();
}
}
}
透明度 Transparency
除了可以繪制實色圖形，還可以用canvas來繪制半透明的圖形。通過設置 globalAlpha 屬性或者使用一個半透明顏色作為輪廓或者填充色。
globalAlpha = transparencyValue
這個屬性影響到canvas里所有的圖形透明度，有效范圍是0.0（完全透明）到1.0（完全不透明），默認是1.0。
globalApha 屬性需要在繪制全局擁有透明度相同的圖形時，如果需要改變單個圖形的透明度，設置 strokeStyle 和 fillStyle 的屬性為 rgba 類型。
ctx.fillStyle = "rgba(255,0,0,0.5)"
ctx.strokeStyle = "rgba(255,0,0,0.5)"
線型 Line style
可以通過一系列屬性來設置線的樣式。
lineWidth = value
設置線條的寬度。默認值為1.0。
lineCap = type
設置線條末端樣式。butt round square 默認是 butt
lineJoin = type
設定線條與線條間結合處的樣式。 round bevel 和 miter 默認是miter。
miterLimit = value
限制當兩條線相交時交接處最大的長度，所謂交接處長度是指線條交接處內角頂點到另外角頂點的長度。
getLineDash()
返回一個包含當前虛線樣式，長度為非負數的數組。
setLineDash(segments)
設置當前虛線樣式。
lineDashOffset = value
設置虛線樣式的起始偏移量。
lineWidth 屬性的例子
這個屬性設置當前繪線的粗細，屬性值必須為正數。默認值是1.0。
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
for(var i = 0;i<10;i++){
ctx.lineWidth = 1+i //遞增增加lineWidth
ctx.beginPath()
ctx.moveTo(5+i*14,5)
ctx.lineTo(5+i*14,140)
ctx.stroke()
}
}
}
lineCap 屬性的例子
屬性lineCap 的值決定了線段端點顯示的樣子。可以為下面的三種樣式butt round square 默認是butt
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
var lineCap = ['butt', 'round', 'square'];
// 創建路徑
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();
// 畫線條
ctx.strokeStyle = 'black';
for (let i = 0; i < lineCap.length; i++) {
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i]
ctx.beginPath()
ctx.moveTo(25 + i * 50, 10)
ctx.lineTo(25 + i * 50, 140)
ctx.stroke()
}
}
}
最左邊的線用了默認的butt。中間的是 round效果，端點處加了半徑為一半線寬的半圓，右邊的是square的效果，端點處加上了等寬且高度為一半線寬的方塊。
lineJoin 屬性的例子
lineJoin的屬性值決定了圖形中兩線段連接處所顯示的樣子，可以為以下三種樣式： round bevel 和 miter 默認是 miter。
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 10;
for (var i = 0; i < lineJoin.length; i++) {
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(5, 5 + i * 40);
ctx.lineTo(35, 45 + i * 40);
ctx.lineTo(75, 5 + i * 40);
ctx.lineTo(115, 45 + i * 40);
ctx.lineTo(155, 5 + i * 40);
ctx.stroke();
}
}
}
用三條折線來做例子，分別設置不同的lineJoin值。最上面一條是 round 的效果，邊角處被磨圓了，圓的半徑等于線寬。中間為bevel效果，下層為miter效果。當值為miter效果時，線段會在連接處外側延伸直至交于一點，延伸效果受到 miterLimit 屬性的制約。
miterLimit 屬性的演示例子
當設置 lineJoin 的屬性為 miter 的效果時，線段的外側邊緣會延伸交匯于一點上。線段夾角越小焦點的距離越大。
miterLimit 屬性就是用來設定外延交點與連接點的最大距離，如果交點距離大于這個值，連接效果就會變為 bevel 。
使用虛線
用 setLineDash([a,b]) 方法和 lineDashOffset 屬性來制定虛線樣式。 setLineDash 方法接受一個數組，來指定線段與間隙的交替，lineDashOffset 屬性設置起始偏移量。
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.setLineDash([5,15]) //設置交替量為5，15
ctx.lineDashOffset = 2
ctx.beginPath()
ctx.moveTo(0,50)
ctx.lineTo(400,50)
ctx.stroke()
}
}
漸變 Gradients
像一般的繪圖軟件一樣，可以使用線性或者徑向的漸變來填充或者描邊。
使用下面的方法新建一個 canvasGradient 對象，并且賦值給圖形的 fillStyle 或者 strokeStyle 屬性。
createLinearGradient(x1,y1,x2,y2)
createLinearGradient 方法接受4個參數，表示漸變的起點（x1,y1） 與終點 （x2,y2）。
createRadialGradient(x1,y1,r1,x2,y2,r2)
createRadialGradient(x1,y1,r1,x2,y2,r2) 方法接受6個參數，前三個定義一個以（x1,y1）為圓心，半徑為r1的圓，后三個參數定義另一個以（x2,y2）為圓心，半徑為r2的圓。
let lineGradient = ctx.createLinearGradient(0,0,150,150)
let radialGradient = ctx.createLinearGradient(75,75,0,75,75,100)
在創建完 canvasGradient 對象之后就可以使用 addColorStop 添加顏色了。
canvasGradient.addColorStop(position,color)
addColorStop 方法接受2個參數，position 參數必須是一個0.0 到 1.0 之間數值，表示漸變中顏色所在的相對位置。例如，0.5 表示顏色會出現在正中間。 color 參數必須是一個有效的css顏色值。
可以添加任意多個色標，下面是最簡單的線性黑白漸變的例子。
let linearGradient = ctx.createLineGradient(0,0,150,150)
linearGradient.addColorStop(0.0,'white')
linearGradient.addColorStop(1,'black')
createLinearGradient 的例子
在例子中設置了兩種不同的漸變。設置漸變的步驟是 創建canvasGradient 對象 --> 使用addcolorStop 設置漸變色標 --> 將 canvasGradient 賦值給 fillStyle 或者 strokeStyle --> 使用 fillRect 或者 strokeRect 繪制圖形
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
// Create gradients
var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#26C000');
lingrad.addColorStop(1, '#fff');
var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
lingrad2.addColorStop(0.5, '#000');
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
// draw shapes
ctx.fillRect(10, 10, 130, 130);
ctx.strokeRect(50, 50, 50, 50);
}
}
createRadialGrdient 的例子
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// 創建漸變
var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
// 畫圖形
ctx.fillStyle = radgrad4;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,150,150);
}
圖案樣式 Patterns
createPattern(image,type)
該方法接受兩個參數，image 可以是一個 image 對象的引用，或者另一個canvas對象。 type 必須為下列的參數值之一： repeat repeat-x repeat-y no-repeat
圖案的應用跟漸變很類似的，創建出一個pattern之后，賦值給 fillStyle 或者 strokeStyle 屬性即可。
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
//創建image對象 用作圖案
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'
//使用onload 確保圖片已經被加載
img.onload = function(){
var ptrn = ctx.createPattern(img,'repeat')
ctx.fillStyle = ptrn
ctx.fillRect(0,0,150,150)
}
}
}
陰影 Shadows
shadowOffsetX = float shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用來設定陰影在X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的，負值表示陰影會向上或者向左延伸，正值則表示會往下或者右延伸，它們都默認為 0。
shadowBlur = float
shadowBlur 用于設定陰影的模糊程度，其數值并不跟像素數量掛鉤，也不受變換矩陣的影響，默認為 0 。
shadowColor = color
shadowColor 使用標準的css 顏色值，設定陰影的顏色
文字陰影的例子
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
//設置陰影
ctx.shadowOffsetX = 2
ctx.shadowOffsetY = 2
ctx.shadowBlur = 5
ctx.shadowColor = "rgba(0,0,0,0.5)"
//設置文字
ctx.font = "20px Times New Roman"
ctx.fillStyle = 'black'
ctx.fillText("Sample String", 5, 30);
}
}
