HTML5之繪製圖像和文字
1.繪製圖像的方法
- context.drawImage(imageObj,x,y);
此方法需要一個影象物件和一個起始點作為引數，其中起始點座標是相對於canvas的左上角的位置
- context.drawImage(imageObj,x,y,width,height);width,height是用來指定顯示影象的尺寸
- context.drawImage(imageObj,sx,sy,sw,sh,dx,dy,dw,dh);
img
sx：開始剪下的 x 座標位置。
sy：開始剪下的 y 座標位置。
sw：被剪下影象的寬度。
sh：
dx：在畫布上放置影象的 x 座標位置。
dy：在畫布上放置影象的 y 座標位置。
width：要使用的影象的寬度。（伸展或縮小影象）
height
<html>
<head>
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var imageObj=new Image();
imageObj.src="img/123.jpg";
imageObj.onload=function(){
//context.drawImage(imageObj,10,10);//原始圖片大小
//context.drawImage(imageObj,10,10,200,300);//指定繪製圖像的大小
context.drawImage(imageObj,50,40,300,450,50,50,350,450);//擷取影象
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>2.繪製文字
繪製文字的方法：context.fillText(Text,x1,y1);其中Text是要繪製的文字，x1,y1是繪製文字的位置
設定文字的字型、大小和樣式：font屬性，樣式可以是normal、italic或bold。預設是normal。
設定文字顏色：使用fillStyle屬性設定。
描繪文字邊緣：使用strokeText()方法替代fillText(),同時使用strokeStyle代替fillStyle屬性。
<html>
<head>
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var x=100;
var y=100;
context.font="italic 40px Arial";
context.strokeStyle="#0000ff";
context.lineWidth=2;//設定描邊寬度
context.strokeText("hello world",x,y);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html> 
繪製文字對齊：textAlign屬性，可用的選項包括start、end、left、center和right。
文字度量：使用measureText()方法獲取文字的尺度資訊，
文字換行：需要建立一個使用者自定義函式，此函式需要canvas上下文物件、一個文字字串、一個位置、一個最大寬度和行高度資訊。函式將使用measureText()計算何時換行。