html5 canvas學習--繪製文字

xiaopengyaonixi發表於2016-10-07
HTMLCanvas

1.繪製填充文字：context.fillText(text,x,y,[maxWidth])

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			ctx.font = "italic 35px 黑體";
			ctx.fillStyle = "Red";
			ctx.fillText("繪製填充文字",30,60,200);
			ctx.font = "bold 35px 宋體";
			ctx.fillStyle = "blue";
			ctx.fillText("繪製填充文字",30,100);
			ctx.font = "25px 隸書";
			ctx.fillStyle = "Green";
			ctx.fillText("繪製填充文字",30,130);
		}
		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="350" height="200" style="border:solid 1px gray;"></canvas>
</body>
</html>

2. 繪製輪廓文字：context.strokeText(text,x,y,[maxWidth]); 測量文字的長度:context.measureText(text);

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			ctx.font = "bold 20px 黑體";
			ctx.fillStyle = "Blue";
			var txt1 = "滾滾長江東逝水,浪花淘盡英雄";
			ctx.fillText(txt1,10,40);
			var txt2 = "以上字串的寬度為";
			var mtx1 = ctx.measureText(txt1);
			var mtx2 = ctx.measureText(txt2);
			ctx.font = "bold 15px 宋體";
			ctx.fillStyle = "Red";
			ctx.fillText(txt2,10,80);
			ctx.fillText(mtx1.width,mtx2.width,80);
			var message = "這是文字";
			// 繪製空心文字
			ctx.font = "25px 隸書";
			ctx.strokeStyle = "Green";
			ctx.strokeText(message,30,130);
		}

		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="350" height="200"></canvas>
</body>
</html>



相關文章