CSS3中的許多都可以類比與我們canvas的一些屬性
canvas中「畫筆」環境物件的許多屬性都可以類比CSS3中的屬性
我們不僅僅可繪製圖形,也可以在畫布中加入文字
同樣先取得元素物件與環境物件
<canvas id="myCanvas" width=500 height=500></canvas>
var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d');
font用於設定字體屬性
fillText設定實體文字與位置
strokeText設定空心文字與位置
ctx.fillStyle = 'red'; ctx.font = '50px sans-serif'; ctx.fillText('hello world!', 100, 100);
font可以參考css的font屬性
預設值'10px sans-serif'
#還有一個測量文字寬度的方法可以了解即可
measureText()
console.log(ctx.measureText('hello world!').width);
lineCap( )用於設定線段覆蓋屬性
有三個值,butt/square/round
ctx.lineCap = 'butt'; //默认ctx.lineWidth = 50; ctx.moveTo(100, 100); ctx.lineTo(400, 100); ctx.stroke(); ctx.beginPath(); ctx.lineCap = 'square'; ctx.lineWidth = 50; ctx.moveTo(100, 200); ctx.lineTo(400, 200); ctx.stroke(); ctx.beginPath(); ctx.lineCap = 'round'; ctx.lineWidth = 50; ctx.moveTo(100, 300); ctx.lineTo(400, 300); ctx.stroke();
圖片中的灰色線條是我添加的
這樣就能夠看出三個值得區別
lineJoin()定義了線段接合的行為
同樣有三個值,miter/round/bevel
ctx.lineWidth = 40; ctx.lineJoin = 'miter'; //默认ctx.moveTo(100, 100); ctx.lineTo(400, 400); ctx.lineTo(100, 400); ctx.closePath(); ctx.stroke();
ctx.lineWidth = 40; ctx.lineJoin = 'round'; //改ctx.moveTo(100, 100); ctx.lineTo(400, 400); ctx.lineTo(100, 400); ctx.closePath(); ctx.stroke();
ctx.lineWidth = 40; ctx.lineJoin = 'bevel'; //改ctx.moveTo(100, 100); ctx.lineTo(400, 400); ctx.lineTo(100, 400); ctx.closePath(); ctx.stroke();
#當我們使用預設的miter時
當兩條線段角度很小的時候
「尖」會越來越大
當它「尖」到一定程度時,預設值就會變成bever
我們可以設定突破這個限制,使用miterLimit
這樣改變預設值的長度就會被我們設定為limit*lineWidth/2
了解就好
ctx.miterLimit = 30;
clip屬性表示當前路徑外的區域不再繪製
就相當於把當前這塊區域從畫布上裁剪下來
ctx.arc(250, 250, 100, 0, Math.PI*2, 0);ctx.clip();ctx.fillRect(0, 0, 500, 500);
這裡我把畫布截成了一個圓
這樣填滿矩形時就只能填到這個「圓形畫布」裡了
使用globalAlpha可以設定全域透明度
這個非常簡單就不多解釋了
ctx.globalAlpha = 0.4;ctx.fillRect(100, 100, 300, 300);
globalCompositeOperation用於設定
新圖形像素與舊圖形像素的合併方式
它有11個值
常見的有3個,source-over(預設)/destination-over/copy
souce-over是後繪製圖形覆蓋到先繪製圖形的上面
destination-over是先繪製圖形在後繪製圖形的上面
copy是只顯示後繪製圖形(先繪製圖形消失)
其他值理論上是這樣的(不同瀏覽器實現程度或方式不同)
ctx.fillStyle = 'blue'; ctx.fillRect(100, 100, 200, 200); ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = 'red'; ctx.arc(300, 300, 100, 0 ,Math.PI*2, 0); ctx.fill();
#下面我給我在最新版chrome測試的11個值供大家參考
source-over:
destination-over:
#copy:
source-out:
destination-out:
# 以上就是HTML5畫布Canvas文本填充、線段屬性、裁切、透明與像素合併方式的內容,更多相關內容請關注PHP中文網(www.php.cn)!