當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5 canvas样式和颜色

發布時間：2024/3/26 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5 canvas样式和颜色小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

上一篇博客中，我們討論了canvas的一些基本的繪制路徑API，我們可以用這些API繪制想要的形狀。而在這里，我們將會給這些形狀添加樣式。這些樣式包括：色彩，透明度，線型，漸變，圖案樣式，陰影，填充。

1.色彩Colors

在用fill()方法和stroke()方法時，我們可以用fillStyle和strokeStyle設置填充和邊框的顏色：

fillStyle = “color” 設置圖形的填充顏色。
strokeStyle=“color” 設置圖形輪廓的顏色。

注意: 一旦設置了 strokeStyle 或者 fillStyle 的值，那么這個新值就會成為新繪制的圖形的默認值。如果要給每個圖形上不同的顏色，需要重新設置 fillStyle 或 strokeStyle 的值。

fillStyle和strokeStyle示例

2.透明度Transparency

我們在繪制圖形時也可以給填充和輪廓設置透明度，而透明度的設置可以通過globalAlpha或直接用rgba函數：

globalAlpha使用方法：

globalAlpha = transparencyValue 如 globalAlpha = 0.2;

rgba使用方法：

ctx.fillStyle="rgba(255,0,0,0.2); ctx.strokeStyle='rgba(255,0,0,0.2);

注意：

不透明度有效范圍是從 0.0（完全透明）到 1.0（完全不透明）。
globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時候相當高效。但是實際使用過程中rgba函數可能更加實用。

globalAlpha示例

rgba（）示例

3.線型Line styles

線型是輪廓或者lineTo方法的重要屬性，line的屬性包括：

lineWidth = value設置線條寬度
lineCap = type設置線條末端樣式。
lineJoin = type設定線條與線條間接合處的樣式。
miterLimit = value限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度。
getLineDash()返回一個包含當前虛線樣式，長度為非負偶數的數組。
setLineDash(segments)設置當前虛線樣式。
lineDashOffset = value設置虛線樣式的起始偏移量。
下面我們來介紹這些屬性方法：

（1）lineWidth線寬屬性

當前前繪線的粗細。屬性值必須為正數，默認值是1.0。

（2）lineCap端點樣式

屬性 lineCap 的值決定當前線段端點顯示樣式，取值有三：

butt 默認方形樣式
round 圓形樣式
square 突出方形樣式

（3）lineJoin連接樣式

屬性 lineJoin 的值決定當前線段連接處顯示樣式，取值有三：

miter 默認方形樣式
round 圓形樣式
bevel 斜角樣式

（4）虛線setLineDash和lineDashOffset

對于stroke輪廓，我們除了可以給他設置顏色，粗細，端點，連接外，還能設置他的虛實，而虛線的設置主要由兩部分組成：

setLineDash 設置實線與間隙的占比，接受一個數組
lineDashOffset 設置虛線的起始偏移量

lineDash示例

先設置虛線的樣式，然后再用虛線畫出矩形，結合遞歸函數就能社指出動畫：

4.漸變Gradients

就好像一般的繪圖軟件一樣，我們可以用線性或者徑向的漸變來填充或描邊。我們用下面的方法新建一個 canvasGradient 對象，并且賦給圖形的 fillStyle 或 strokeStyle 屬性。

（1）創建漸變對象：

createLinearGradient(x1,y1,x2,y2) 線性漸變，（x1，y1）表示漸變的起點，（x2，y2）表示漸變的終點
createRadialGradient(x1,y1,r1,x2,y2,r2) 圓形漸變，(x1,x2,r1)確定一個起點圓，(x2,y2,r2)確定一個終點圓
使用方法：

var linearGradient=ctx.createLinearGradient(0,0,100,100);線性漸變對象 var radialGradient=ctx.createRadialGradient(45,45,0,45,45,30);//圓形漸變對象

（2）給對象上色addColorStop

gradient.addColorStop（position,color）方法接受兩個參數，position在0~1之間，表示漸變時對于模型的相對位置，color則是一個顏色字符串。
使用方法：

linearGradient.addColorStop(0.5,"rgb(255,255,0)");//在線性漸變對象的中部設置漸變色為rgb

createLinearGradient

function draw_linear() {var ctx = document.getElementById('canvas').getContext('2d');// Create gradientsvar lingrad = ctx.createLinearGradient(0,0,0,150);lingrad.addColorStop(0, '#00ABEB');lingrad.addColorStop(0.5, '#fff');lingrad.addColorStop(1, '#26C000');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 stylesctx.fillStyle = lingrad;//屬性值賦給fillStylectx.strokeStyle = lingrad2;//屬性值賦給stroke// draw shapesctx.fillRect(10,10,130,130);ctx.beginPath();ctx.arc(75,75,40,0,2*Math.PI,true);ctx.stroke(); }

createRadialGradient

圓形漸變可以制作一個具有3D效果的小球，只需要我們將漸變起點和漸變終點稍微錯位，就能達到這樣的效果：

function draw_radia() {var ctx=document.getElementById("canvas").getContext('2d');var radgrad1=ctx.createRadialGradient(100,100,20,110,115,50);radgrad1.addColorStop(0, "#CDCD9A");radgrad1.addColorStop(0.9,"#808040");radgrad1.addColorStop(1,"rgb(97,97,48,0)");var radgrad2=ctx.createRadialGradient(200,100,10,205,108,30);radgrad2.addColorStop(0, "#ACD6FF");radgrad2.addColorStop(0.8,"#005AB5");radgrad2.addColorStop(1,"rgb(0,0,121,0)");var radgrad3=ctx.createRadialGradient(200,40,5,204,45,20);radgrad3.addColorStop(0, " #CAFFFF");radgrad3.addColorStop(0.85,"#00CACA");radgrad3.addColorStop(1,"rgb(0,62,62,0)");ctx.fillStyle=radgrad1;ctx.beginPath();ctx.fillRect(0,0,1000,800);ctx.fillStyle=radgrad2;ctx.beginPath();ctx.fillRect(0,0,1000,800);ctx.fillStyle=radgrad3;ctx.beginPath();ctx.fillRect(0,0,1000,800);ctx.fillStyle="rgba(0,0,0,0.2)";ctx.fillRect(0,0,1000,800); }

注意，這里的漸變是對于整個canvas對象來說的，所以如果addColorStop的邊界1處未設置透明，將會使得整個區域都是漸變色.

5.圖案樣式 Patterns

在創建canvas畫布時是否可以將圖片設置為畫布的背景？實際上我們完全可以用CSS的方法設置background-img來實現。在HTML5中的canvas畫布也提供了圖案樣式API，我們首先用img方法獲取圖片（在使用圖片之前要先確認圖片加載完畢），然后用createPattern(image, type)方法創建圖案對象，再將對象賦值給fillStyle，我們就能用繪圖API繪制圖形了。

Image() 創建一個Image()對象
createPattern(image, type)創建一個圖案對象，該方法接受兩個參數。Image 可以是一個 Image 對象的引用，或者另一個 canvas 對象。Type 必須是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

createPattern實例：

6.陰影 Shadows

文字陰影

文字陰影相比已經不足為奇，在CSS3中的text-shadow屬性可以設置2D的陰影，在HTML5中canvas也提供了這樣的API

shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都為 0。
shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都為 0。
shadowBlur = float shadowBlur 用于設定陰影的模糊程度，其數值并不跟像素數量掛鉤，也不受變換矩陣的影響，默認為 0。
shadowColor = color shadowColor 是標準的 CSS 顏色值，用于設定陰影顏色效果，默認是全透明的黑色。
這和CSS3的text-shadow有異曲同工之妙，這里不再贅述

function draw() {var ctx = document.getElementById('canvas').getContext('2d');ctx.shadowOffsetX = 2;ctx.shadowOffsetY = 2;ctx.shadowBlur = 2;ctx.shadowColor = "rgba(0, 0, 0, 0.5)";ctx.font = "20px Times New Roman";ctx.fillStyle = "Black";ctx.fillText("Sample String", 5, 30); }

7.Canvas 填充規則

當我們用到 fill（或者 clip和isPointinPath ）你可以選擇一個填充規則，該填充規則根據某處在路徑的外面或者里面來決定該處是否被填充，這對于自己與自己路徑相交或者路徑被嵌套的時候是有用的。

兩個可能的值：

“nonzero”: non-zero winding rule, 默認值.
“evenodd”: even-odd winding rule.

這個例子，我們用填充規則 evenodd

function draw() {var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI*2, true);ctx.arc(50, 50, 15, 0, Math.PI*2, true);ctx.fill("evenodd"); }

總結

以上是生活随笔為你收集整理的HTML5 canvas样式和颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。