HTML5 Canvas (3) - 圖片及文字

HTML 5 canvas

HTML5 Canvas 圖片及文字。

5. 圖片

5.1 顯示圖片

要在Canvas上顯示圖片，必須使用drawImage，並指定圖片來源及位置。

context.drawImage(imageObj,destX,destY);

程式碼：

var img = new Image();
img.onload = function(){
    context.drawImage(img, 10, 10);
};
img.src = "http://www.w3.org/html/logo/img/one-color.png";

若要更改圖片的尺寸，就在drawImage中加入寬及高，如下：

context.drawImage(img, 10, 10, img.width*2, img.height*2);

這樣圖片就會是原來的2倍大。

5.2 裁切圖片

接下來我們可裁切圖片的某個部份。

context.drawImage(img, sourceX, sourceY, sourceW, sourceH, destX, destY, destW, destH);

前面的4個數字代表的要從原始圖片截取的某個部份的值，後面4個數字則是這個被截取的部份，要畫在canvas的哪個位置，若尺寸沒有和被截取的相同則會變形。

程式碼：

var img = new Image();
img.onload = function(){
  //原圖要截取的座標起點
  var sourceX = 30;
  var sourceY = 5;
  //原圖要截取的尺寸
  var sourceW = 66;
  var sourceH = 32;
  //被截取的圖片要放在畫布的座標
  var destX = 150;
  var destY = 100;
  //被截取的圖片的尺寸,通常會和截取的尺寸相同,否則就會被放大或縮小
  var destW = sourceW;
  var destH = sourceH;
  context.drawImage(img, sourceX, sourceY, sourceW, sourceH, destX, destY, destW, destH);
};
img.src = "http://www.w3.org/html/logo/img/one-color.png";

5.3 儲存圖片

當你對畫布上的圖像按右鍵要另存時，你會發現沒有儲存的選項，這時可以用 canvas 的 toDataURL 方法讓畫布成為 <img> 的影像來源。也就是多加個 img 標籤，將 src 指定為由畫布轉過來的影像資料。因為在畫面上會有 canvas 及 img 兩個一模一樣的影像，如果不想讓 canvas 出現，可以加上 style="display:none" 讓它隱藏起來。

這個示範會把前一節《4.3裁切》中的範例圖形製作可以另存的圖片，程式碼如下：
Javascript部份：

//裁切範圍
context.beginPath();
context.rect(100, 50, 200, 150);
context.clip();

//暗紅色圓
context.beginPath();
context.arc(200, 200, 100, 0, 2 * Math.PI, false);
context.fillStyle = "#A52A2A";
context.fill();

//黃色圓
context.beginPath();
context.arc(100, 50, 150, 0, 2 * Math.PI, false);
context.fillStyle = "#FFA500";
context.fill();

//綠色圓
context.beginPath();
context.arc(300, 50, 150, 0, 2 * Math.PI, false);
context.fillStyle = "#008000";
context.fill();

//將畫布的圖像資料送給img標籤當成影像來源
var dataURL = canvas.toDataURL();
document.getElementById("saveimage").src = dataURL;

HTML部份：

<canvas id="myCanvas" width="400" height="300" style="display: none;"></canvas>
<img id="saveimage" />

6. 文字

6.1 顯示文字

使用font來顯示文字，同時指定字級及字型。

context.font = "12px Verdana";

你可以為文字指定顏色。若不指定則預設為黑色。

context.fillStyle="顏色值";

接著使用fillText來指定在什麼位置顯示文字。

context.fillText("要顯示的字", x, y);

程式碼：

context.font = "30px Verdana";
context.fillStyle = "#008000";
context.fillText("Hello HTML5 :)", 70, 100);

6.2 透空字

將原本的fillStyle換成strokeStyle，fillText換成strokeText即可。另外要設定線寬的話要用lineWidth。

context.strokeStyle="顏色值";
context.strokeText("要顯示的字", x, y);

因為stroke只是描文字的邊，所以看起來像是透空的，如果你想要填色，那就記得之前說的，先填色再描邊即可。

程式碼：

context.font = "50px Verdana";
context.fillStyle = "#FFA500";
context.fillText("Hello HTML5 :)", 10, 100);
context.lineWidth = 3;
context.strokeStyle = "#800000";
context.strokeText("Hello HTML5 :)", 10, 100);

6.3 對齊

使用textAlign指定文字在canvas中的水平位置，對齊方式有5種：

start
end
left
center
right

使用textBaseline指定底線的對齊方式，有6種：

top
hanging
middle
alphabetic
ideographic
bottom

程式碼：

var x = canvas.width / 2;
var y = canvas.height / 2;

context.font = "50px Verdana";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "#57E964";
context.fillText("Hello HTML5 :)", x, y);
context.lineWidth = 3;
context.strokeStyle = "#347C17";
context.strokeText("Hello HTML5 :)", x, y);

6.4 度量文字

有時候你需要知道文字的寬度，可以用measureText去取得度量值。

var metrics = context.measureText(text);
var width = metrics.width;

text是要測量的文字字串變數。

程式碼：

var x = canvas.width / 2;
var y = canvas.height / 2;
var text = "Hello HTML5 :)";

context.font = "50px Verdana";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "#6698FF";
context.fillText(text, x, y);

var metrics = context.measureText(text);
var tW = metrics.width;
context.font = "30px Tahoma";
context.fillStyle = "#333333";
context.textAlign = "center";
context.fillText("Text Width: " + tW + "px", x, y + 50);

本文網址：https://blog.tonycube.com/2012/03/html5-canvas-3.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀