HTML5畫布Canvas文本填充、線段屬性、裁剪、透明度與像素合并方式

CSS3中的很多都可以類比與我們canvas的一些屬性
canvas中“畫筆”環(huán)境對(duì)象的很多屬性都可以類比CSS3中的屬性
我們不僅僅可以繪制圖形，還可以向畫布中添加文字

文字填充

同樣先獲取元素對(duì)象與環(huán)境對(duì)象

<canvas id="myCanvas" width=500 height=500></canvas>

var canvas = document.getElementById('myCanvas'),
 ctx = canvas.getContext('2d');

font用于設(shè)置字體屬性
fillText設(shè)置實(shí)體文字與位置
strokeText設(shè)置空心文字與位置

ctx.fillStyle = 'red';
ctx.font = '50px sans-serif';
ctx.fillText('hello world!', 100, 100);

font可以參考css的font屬性
默認(rèn)值’10px sans-serif’

還有一個(gè)測(cè)量文字寬度的方法了解即可
measureText()

console.log(ctx.measureText('hello world!').width);

線段屬性

線段覆蓋

lineCap()用于設(shè)置線段覆蓋屬性
有三個(gè)值，butt/square/round

ctx.lineCap = 'butt'; //默認(rèn)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();

圖片中的灰色線條是我添加的
這樣就能夠看出三個(gè)值得區(qū)別

線段接合

lineJoin()定義了線段接合的行為
同樣有三個(gè)值，miter/round/bevel

ctx.lineWidth = 40;
ctx.lineJoin = 'miter'; //默認(rèn)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();

當(dāng)我們使用默認(rèn)的miter時(shí)
當(dāng)兩條線段角度很小的時(shí)候
“尖”會(huì)越來(lái)越大

當(dāng)它“尖”到一定程度時(shí)，默認(rèn)值就會(huì)變成bever

我們可以設(shè)置突破這個(gè)限制，使用miterLimit
這樣改變默認(rèn)值的長(zhǎng)度就會(huì)被我們?cè)O(shè)置為limit*lineWidth/2
了解就好

ctx.miterLimit = 30;

裁剪

clip屬性表示當(dāng)前路徑外的區(qū)域不再繪制
就相當(dāng)于把當(dāng)前這塊區(qū)域從畫布上裁剪下來(lái)

ctx.arc(250, 250, 100, 0, Math.PI*2, 0);ctx.clip();ctx.fillRect(0, 0, 500, 500);

這里我把畫布截成了一個(gè)圓
這樣填充矩形時(shí)就只能填充到這個(gè)“圓形畫布”里了

透明度

使用globalAlpha可以設(shè)置全局透明度
這個(gè)非常簡(jiǎn)單就不多解釋了

ctx.globalAlpha = 0.4;ctx.fillRect(100, 100, 300, 300);

像素合并

globalCompositeOperation用于設(shè)置
新圖形像素與舊圖形像素的合并方式
它有11個(gè)值
常見(jiàn)的有3個(gè)，source-over(默認(rèn))/destination-over/copy
souce-over是后繪制圖形覆蓋到先繪制圖形的上面
destination-over是先繪制圖形在后繪制圖形的上面
copy是只顯示后繪制圖形（先繪制圖形消失）
其他值理論上是這樣的（不同瀏覽器實(shí)現(xiàn)程度或方式不同）

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測(cè)試的11個(gè)值供大家參考

source-over：

destination-over：

copy：

lighter：

xor：

source-atop：

destination-atop：

source-in：

destination-in：

source-out：

destination-out：

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com