使用canvas實現文本填充

時間 2019-11-24

標籤使用 canvas 實現文本填充简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圖像</title>
	<style>
		canvas{
			border:1px solid red;
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			// 繪製一個文本
			// 填充文本
			context.font = 'bold 30px 微軟雅黑';
			// context.textAlign = 'left';
			// context.textAlign = 'center';
			// context.textAlign = 'right';
			// context.textBaseline = 'top';
			// context.textBaseline = 'middle';
			context.textBaseline = 'ideographic';
			// 參數：文本內容，開始繪製x,y,最大寬度
			context.fillText('你好',100,100,30);
			// 畫一條直線做爲參考
			context.beginPath();
			context.moveTo(0,100);
			context.lineTo(100,100);
			context.closePath();
			context.stroke();
			// canvas裏的東西輸出到頁面上，做爲一張圖片輸出
			var url = canvas.toDataURL('image/png');
			var img1 = document.images[0];
			img1.src = url;
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="700px" height="400px"></canvas>
	<img src="" alt="">
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。