屬性
1、canvas
CanvasRenderingContext2D.canvas 屬性是只讀的，是HTMLCanvasElement的反向引用侣诵，如果沒(méi)有<Canvas> 元素與之對(duì)應(yīng)贮庞，對(duì)象值為null
語(yǔ)法：ctx.canvas
示例：
給出<canvas>元素
//html
<canvas id="canvas"></canvas>
//JS
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.canvas
2、fillStyle
.fillStyle 描述顏色和樣式的屬性筝蚕，默認(rèn)值是#000 黑色
語(yǔ)法：
ctx.fillStyle = color
ctx.fillStyle = gradient
ctx.fillStyle = pattern
選項(xiàng)：
color 被轉(zhuǎn)換成CSS<color>顏色值
gradient 線性漸變或者放射性漸變
patern 可重復(fù)圖像
示例：
- 使用
fillStyle屬性設(shè)置不同的顏色
//html
<canvas id="canvas"></canvas>
//js
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle = "blue"
ctx.fillRect(10, 10, 100, 100)
效果圖：
-
fillStyle使用for循環(huán)的例子
我們使用兩個(gè)for循環(huán)繪制一個(gè)矩形表格，每個(gè)單元格都有不同的顏色铺坞。 最終的結(jié)果圖像看起來(lái)像屏幕截圖起宽，其實(shí)沒(méi)有令人驚嘆的事情發(fā)生。我們使用兩個(gè)變量i和j為每一個(gè)單元格生成唯一的RGB顏色济榨，并且只改變紅色和綠色的數(shù)值坯沪。藍(lán)色通道的值是固定不變的。通過(guò)修改這些通道擒滑，你能生成各種各樣的調(diào)色板腐晾。通過(guò)逐步地增加，你能實(shí)現(xiàn)類似Photoshop的調(diào)色板丐一。
//html
<canvas id="canvas"></canvas>
//js
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)
}
}
效果圖：
3藻糖、font
設(shè)置當(dāng)前字體樣式的屬性。與此同時(shí)CSS font使用相同库车，默認(rèn)字體是 10px sans-serif.
語(yǔ)法：ctx.font = value
示例：
設(shè)置不同的字體大小和字體種類
//js
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.font = "48px serif"
ctx.strokeText("Hello world", 50, 100)
效果圖：
4巨柒、globalAlpha
描述在canvas上繪圖之前，設(shè)置圖形和圖片透明度的屬性柠衍。 數(shù)值的范圍從0.0（完全透明）到1.0 （完全不透明）洋满。
語(yǔ)法：ctx.globalAlpha = value
選項(xiàng)：
value 數(shù)字在 0.0 （完全透明）和 1.0 （完全不透明）之間。 默認(rèn)值是 1.0拧略。 如果數(shù)值不在范圍內(nèi)芦岂，包括Infinity和NaN無(wú)法賦值，并且 globalAlpha 會(huì)保持原有的數(shù)值垫蛆。
示例：
繪制了2個(gè)半透明的矩形
//js
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.globalAlpha = 0.5
ctx.fillStyle = "blue"
ctx.fillRect(10, 10, 100, 100)
ctx.fillStyle = "red"
ctx.fillRect(50, 50, 100, 100)
效果圖：
5禽最、globalComponiteOperation
設(shè)置要在繪制新形狀時(shí)應(yīng)用的合成操作的類型腺怯，其中type是用于標(biāo)識(shí)要使用的合成或混合模式操作的字符串。
語(yǔ)法：ctx.globalCompositeOperation = type
示例：
繪制2個(gè)矩形在重疊時(shí)相互排斥的情況川无。
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.globalCompositeOperation = "xor"
ctx.fillStyle = "blue"
ctx.fillRect(10,10,100,100)
ctx.fillStyle = "red"
ctx.fillRect(50,50,100,100)
效果圖：
6 呛占、lineCap
指定如何繪制每一條線段末端的屬性。有3個(gè)可能的值懦趋，分別是：butt, round square晾虑。默認(rèn)值是 butt。
語(yǔ)法：
ctx.lineCap = "butt"
ctx.lineCap = "round"
ctx.lineCap = "square"
選項(xiàng)：
butt 線末端以方形結(jié)束
round 線段末端以圓形結(jié)束
square 線段末端以方形結(jié)束仅叫，但是增加了一個(gè)寬度和線段相同帜篇，高度是線段厚度一半的矩形區(qū)域
示例：
使用 lineCap 屬性繪制以圓形結(jié)尾的線段。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineWidth = 15
ctx.lineCap = "round"
ctx.lineTo(100, 100)
ctx.stroke()
效果圖：
7诫咱、lineDashOffset
設(shè)置虛線偏移量的屬性笙隙，例如可以實(shí)現(xiàn)跑馬燈的效果
語(yǔ)法：ctx.lineDashOffset = value
value 偏移量是float精度的數(shù)字。初始值為0.0
示例：
使用 lineDashOffset 屬性繪制虛線
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.setLineDash([4,16])
ctx.lineDashOffset = 2
ctx.beginPath()
ctx.moveTo(0,100)
ctx.lineTo(400,100)
ctx.stroke()
效果圖：
8坎缭、lineJoin
用來(lái)設(shè)置2個(gè)長(zhǎng)度不為0的相連部分（線段竟痰，圓弧，曲線）如何連接在一起的屬性（長(zhǎng)度為0的變形部分掏呼，其指定的末端和控制點(diǎn)在同一位置坏快，會(huì)被忽略）。
語(yǔ)法：
ctx.lineJoin = "bevel"
ctx.lineJoin = "round"
ctx.lineJoin = "miter"
選項(xiàng)：
此屬性有3個(gè)值：round憎夷， bevel 莽鸿，miter。默認(rèn)值是 miter岭接。注意：如果2個(gè)相連部分在同一方向富拗，那么lineJoin不會(huì)產(chǎn)生任何效果臼予，因?yàn)樵谀欠N情況下不會(huì)出現(xiàn)連接區(qū)域鸣戴。
round 通過(guò)填充一個(gè)額外的，圓心在相連部分末端的扇形粘拾，繪制拐角的形狀窄锅，圓角的半徑是線段的寬度。
bevel 在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域缰雇，每個(gè)部分都有各自獨(dú)立的矩形拐角入偷。
miter 通過(guò)延伸相連部分的外邊緣，使其相交于一點(diǎn)械哟，形成一個(gè)額外的菱形區(qū)域疏之。這個(gè)設(shè)置可以通過(guò)miterLimit屬性看到效果。
示例：
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.lineWidth = 10
ctx.lineJoin = "round"
ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineTo(200, 100)
ctx.lineTo(300,0)
ctx.stroke()
效果圖：
9暇咆、lineWidth
設(shè)置線段厚度的屬性（即線段的寬度）锋爪。當(dāng)獲取屬性值時(shí)丙曙，它可以返回當(dāng)前的值（默認(rèn)是1.0）。當(dāng)給屬性值賦值時(shí)其骄，0亏镰，負(fù)數(shù)，Infinity 和NaN 都會(huì)被忽略拯爽；除此之外索抓，都會(huì)被賦予一個(gè)新值。
語(yǔ)法：ctx.lineWidth = value
選項(xiàng)：
value 描述線段寬度的數(shù)字毯炮。0逼肯，負(fù)數(shù)，Infinity 與NaN會(huì)被忽略
示例：
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineWidth = 15
ctx.lineTo(100,100)
ctx.stroke()
效果圖：
10桃煎、miterLimit
設(shè)置斜接面限制比例的屬性汉矿。 當(dāng)獲取屬性值時(shí)， 會(huì)返回當(dāng)前的值（默認(rèn)值是10.0 ）备禀。當(dāng)給屬性值賦值時(shí)洲拇，0，負(fù)數(shù)曲尸，Infinity 和NaN 都會(huì)被忽略赋续；除此之外，都會(huì)被賦予一個(gè)新值另患。
語(yǔ)法：ctx.miterLimit = value
value 斜接面限制比例的數(shù)字纽乱。0，負(fù)數(shù)昆箕，Infinity 和NaN 都會(huì)被忽略
簡(jiǎn)釋：
ctx.lineJoin = "miter" // "miter" > "round" ) "bevel" ]
只有當(dāng)lineJoin 顯示為">"時(shí)鸦列，miterLimit 才有效。邊角的角度越小鹏倘，斜接長(zhǎng)度就會(huì)越大薯嗤。為了避免斜接長(zhǎng)度過(guò)長(zhǎng)，我們可以使用miterLimit屬性纤泵。如果斜接長(zhǎng)度超過(guò)過(guò)miterLimit的值骆姐，邊角會(huì)以lineJoin的"]"類型來(lái)顯示
11、shadowBlue
描述模糊效果程度的屬性捏题；它既不對(duì)應(yīng)象素值也不受當(dāng)前轉(zhuǎn)換矩陣的影響玻褪。默認(rèn)值是0
語(yǔ)法： ctx.shadowBlue = level
level 描述模糊效果程度的，float 類型的值公荧，默認(rèn)值是0 带射。負(fù)數(shù)，Infinity或者 NaN 都會(huì)被忽略
示例：
使用 shadowblur 屬性設(shè)置模糊陰影循狰。 注意：只有設(shè)置shadowColor屬性值為不透明窟社，陰影才會(huì)被繪制捻浦。
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.shadowColor = "black"
ctx.shadowBlur = 10
ctx.fillStyle = "white"
ctx.fillRect(10,10,100,100)
效果圖：
12、shadowColor
描述陰影顏色
示例：
使用 shadowColor 屬性設(shè)置陰影的顏色桥爽。 注意：shadowColor屬性設(shè)置成不透明的朱灿，并且shadowBlur，shadowOffsetX或者shadowOffsetY屬性不為0钠四，陰影才會(huì)被繪制
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.shoadowColor = "black"
ctx.shadowOffsetY = 10
ctx.shadowOffsetX = 10
ctx.fillStyle = "green"
ctx.fillRect(10,10,100,100)
效果圖：
13 盗扒、shadowOffsetX
描述陰影水平面偏移距離
語(yǔ)法： ctx.shadowOffsetX = offset
offset陰影水平偏移距離的float類型的值。默認(rèn)值是0缀去。Infinity或者NaN都會(huì)被忽略
示例：
使用 shadowOffsetX 屬性設(shè)置陰影的水平偏移量侣灶。注意：將shadowColor屬性設(shè)置成不透明，陰影才會(huì)被繪制缕碎。
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.shadowColor = "black"
ctx.shadowOffsetX = 10
ctx.shadowBlur = 10
ctx.fillStyle = "green"
ctx.fillRect(10,10,100,100)
效果圖：
14褥影、shadowOffsetY
描述陰影垂直偏移距離
語(yǔ)法：ctx.shadowOffsetY = offset
offset陰影垂直偏移距離的float類型的值。默認(rèn)值是0咏雌。Infinity或者NaN都會(huì)被忽略
示例：
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.shadowColor = "black"
ctx.shadowOffsetY = 10
ctx.shadowBlur = 10
ctx.fillStyle = "green"
ctx.fillRect(10, 10, 100, 100)
效果圖：
15凡怎、strokeStyle
描述畫筆（繪制圖形）顏色或者樣式的屬性。默認(rèn)值是 #000 (black)
語(yǔ)法：
ctx.strokeStyle = color
ctx.strokeStyle = gradient
ctx.strokeStyle = pattern
選項(xiàng)：
color 轉(zhuǎn)換成CSS<color>值
gradient 線性漸變或放射性漸變
pattern 可重復(fù)的圖片
示例：
使用 strokeStyle 屬性設(shè)置不同的顏色赊抖。
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.strokeStyle = "blue"
ctx.strokeRect(10,10,100,100)
效果圖：
16统倒、textAlign
繪制文本時(shí)，文本的對(duì)齊方式的屬性氛雪。注意房匆，該對(duì)齊是基于CanvasRenderingContext2D.fillText方法的x的值。所以如果textAlign="center"报亩，那么該文本將畫在 x-50%*width浴鸿。
注：這里的textAlign="center"比較特殊。textAlign的值為center時(shí)候文本的居中是基于你在fillText的時(shí)候所給的x的值弦追，也就是說(shuō)文本一半在x的左邊岳链，一半在x的右邊（比較通俗，描述不太清楚骗卜，自己實(shí)驗(yàn)一下就知道）宠页。所以，如果你想讓文本在整個(gè)canvas居中寇仓，就需要將fillText的x值設(shè)置成canvas的寬度的一半。
語(yǔ)法：
ctx.textAlign = "left" || "right" || "center" || "start" || "end"
示例：
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.font = "48px serif"
ctx.textAlign = "left"
ctx.strokeText("Hello world" ,0,100)
效果圖：
17烤宙、textBaseline
當(dāng)前文本基線的屬性（決定文字垂直方向?qū)R方式）
語(yǔ)法：
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"
選項(xiàng)：
top 頂部
hanging 懸掛基線
middle 中間
alphabetic 標(biāo)準(zhǔn)的字母基線
ideographic 表意字基線遍烦；如果字符本身超出了alphabetic表意字基線，那么ideograhpic基線位置在字符本身的底部
botom 底部躺枕， 與ideographic基線的區(qū)別在于ideographic基線不需要考慮下行字母
默認(rèn)值是alphabetic
示例：
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.font = "48px serif"
ctx.textBaseline = "hanging"
ctx.strokeText("Hello world" ,0,100)
