首頁  >  文章  >  web前端  >  HTML5畫布Canvas文字填滿、線段屬性、裁切、透明度與像素合併方式

HTML5畫布Canvas文字填滿、線段屬性、裁切、透明度與像素合併方式

黄舟
黄舟原創
2017-02-27 15:38:182768瀏覽


CSS3中的許多都可以類比與我們canvas的一些屬性
canvas中「畫筆」環境物件的許多屬性都可以類比CSS3中的屬性
我們不僅僅可繪製圖形,也可以在畫布中加入文字

文字填充

同樣先取得元素物件與環境物件

<canvas id="myCanvas" width=500 height=500></canvas>
var canvas = document.getElementById(&#39;myCanvas&#39;),
    ctx = canvas.getContext(&#39;2d&#39;);

font用於設定字體屬性
fillText設定實體文字與位置
strokeText設定空心文字與位置

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

font可以參考css的font屬性
預設值'10px sans-serif'


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

console.log(ctx.measureText(&#39;hello world!&#39;).width);

線段屬性

線段覆蓋

lineCap( )用於設定線段覆蓋屬性
有三個值,butt/square/round

ctx.lineCap = &#39;butt&#39;; //默认ctx.lineWidth = 50;
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = &#39;square&#39;;
ctx.lineWidth = 50;
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = &#39;round&#39;;
ctx.lineWidth = 50;
ctx.moveTo(100, 300);   
ctx.lineTo(400, 300);
ctx.stroke();

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

線段接合

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

ctx.lineWidth = 40;
ctx.lineJoin = &#39;miter&#39;; //默认ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();


ctx.lineWidth = 40;
ctx.lineJoin = &#39;round&#39;; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();


ctx.lineWidth = 40;
ctx.lineJoin = &#39;bevel&#39;; //改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 = &#39;blue&#39;;
ctx.fillRect(100, 100, 200, 200);
ctx.globalCompositeOperation = &#39;source-over&#39;;
ctx.fillStyle = &#39;red&#39;;
ctx.arc(300, 300, 100, 0 ,Math.PI*2, 0);
ctx.fill();

#下面我給我在最新版chrome測試的11個值供大家參考

source-over:

destination-over:

#copy:

##lighter:


xor:


source-atop:


destination-atop:


source-in:


destination-in:


source-out:

destination-out:


# 以上就是HTML5畫布Canvas文本填充、線段屬性、裁切、透明與像素合併方式的內容,更多相關內容請關注PHP中文網(www.php.cn)!


#
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn