使用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>