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:
lighter:
xor:
source-atop:
destination-atop:
source-in:
destination-in:
source-out:
destination-out: