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);
本文網址:http://blog.tonycube.com/2012/03/html5-canvas-3.html
Tony Blog 撰寫,轉載時請註明出處及文章連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。