typescript重写canvas --15.文字的对齐方式
1.使用 canvas 文字的对齐方式
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.moveTo(160,0);
context.lineTo(160,300);
context.stroke();
context.beginPath();
context.textAlign='start';
context.font='30px Arial';
context.fillText("Hello World",160,50);
context.beginPath();
context.textAlign='end';
context.font='30px Arial';
context.fillText("Hello World",160,100);
context.beginPath();
context.textAlign='left';
context.font='30px Arial';
context.fillText("Hello World",160,150);
context.beginPath();
context.textAlign='center';
context.font='30px Arial';
context.fillText("Hello World",160,200);
context.beginPath();
context.textAlign='right';
context.font='30px Arial';
context.fillText("Hello World",160,250);
</script>
</body>
</html>
显示效果如下
2.typescript重写canvas --文字的对齐方式
html文件
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="600" height="400">
你的浏览器不支持HTML5
</canvas>
<script src="./js/15.js"></script>
</body>
</html>
ts文件
const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d")
if (context){
context.moveTo(160,0);
context.lineTo(160,300);
context.stroke();
context.beginPath();
context.textAlign='start';
context.font='30px Arial';
context.fillText("Hello World",160,50);
context.beginPath();
context.textAlign='end';
context.font='30px Arial';
context.fillText("Hello World",160,100);
context.beginPath();
context.textAlign='left';
context.font='30px Arial';
context.fillText("Hello World",160,150);
context.beginPath();
context.textAlign='center';
context.font='30px Arial';
context.fillText("Hello World",160,200);
context.beginPath();
context.textAlign='right';
context.font='30px Arial';
context.fillText("Hello World",160,250);
}
生成的js文件
"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
context.moveTo(160,0);
context.lineTo(160,300);
context.stroke();
context.beginPath();
context.textAlign='start';
context.font='30px Arial';
context.fillText("Hello World",160,50);
context.beginPath();
context.textAlign='end';
context.font='30px Arial';
context.fillText("Hello World",160,100);
context.beginPath();
context.textAlign='left';
context.font='30px Arial';
context.fillText("Hello World",160,150);
context.beginPath();
context.textAlign='center';
context.font='30px Arial';
context.fillText("Hello World",160,200);
context.beginPath();
context.textAlign='right';
context.font='30px Arial';
context.fillText("Hello World",160,250);
}
