typescript重写canvas --13.文字粗体效果
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.textBaseline='alphabetic';
context.font='30px Arial';
context.fillText('Hello World',50,50);
context.moveTo(0,50);
context.lineTo(250,50);
context.stroke();
context.textBaseline='bottom';
context.font='30px Arial';
context.fillText('Hello World',50,100);
context.moveTo(0,100);
context.lineTo(250,100);
context.stroke();
context.textBaseline='hanging';
context.font='30px Arial';
context.fillText('Hello World',50,150);
context.moveTo(0,150);
context.lineTo(250,150);
context.stroke();
context.textBaseline='ideographic';
context.font='30px Arial';
context.fillText('Hello World',50,200);
context.moveTo(0,200);
context.lineTo(250,200);
context.stroke();
context.textBaseline='middle';
context.font='30px Arial';
context.fillText('Hello World',50,250);
context.moveTo(0,250);
context.lineTo(250,250);
context.stroke();
context.textBaseline='top';
context.font='30px Arial';
context.fillText('Hello World',50,300);
context.moveTo(0,300);
context.lineTo(250,300);
context.stroke();
</script>
</body>
</html>
显示效果如下
2.typescript重写canvas --文字大小
html文件
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="600" height="400">
你的浏览器不支持HTML5
</canvas>
<script src="./js/13.js"></script>
</body>
</html>
ts文件
const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d")
if (context){
context.textBaseline='alphabetic';
context.font='30px Arial';
context.fillText('Hello World',50,50);
context.moveTo(0,50);
context.lineTo(250,50);
context.stroke();
context.textBaseline='bottom';
context.font='30px Arial';
context.fillText('Hello World',50,100);
context.moveTo(0,100);
context.lineTo(250,100);
context.stroke();
context.textBaseline='hanging';
context.font='30px Arial';
context.fillText('Hello World',50,150);
context.moveTo(0,150);
context.lineTo(250,150);
context.stroke();
context.textBaseline='ideographic';
context.font='30px Arial';
context.fillText('Hello World',50,200);
context.moveTo(0,200);
context.lineTo(250,200);
context.stroke();
context.textBaseline='middle';
context.font='30px Arial';
context.fillText('Hello World',50,250);
context.moveTo(0,250);
context.lineTo(250,250);
context.stroke();
context.textBaseline='top';
context.font='30px Arial';
context.fillText('Hello World',50,300);
context.moveTo(0,300);
context.lineTo(250,300);
context.stroke();
}
生成的js文件
"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
context.textBaseline='alphabetic';
context.font='30px Arial';
context.fillText('Hello World',50,50);
context.moveTo(0,50);
context.lineTo(250,50);
context.stroke();
context.textBaseline='bottom';
context.font='30px Arial';
context.fillText('Hello World',50,100);
context.moveTo(0,100);
context.lineTo(250,100);
context.stroke();
context.textBaseline='hanging';
context.font='30px Arial';
context.fillText('Hello World',50,150);
context.moveTo(0,150);
context.lineTo(250,150);
context.stroke();
context.textBaseline='ideographic';
context.font='30px Arial';
context.fillText('Hello World',50,200);
context.moveTo(0,200);
context.lineTo(250,200);
context.stroke();
context.textBaseline='middle';
context.font='30px Arial';
context.fillText('Hello World',50,250);
context.moveTo(0,250);
context.lineTo(250,250);
context.stroke();
context.textBaseline='top';
context.font='30px Arial';
context.fillText('Hello World',50,300);
context.moveTo(0,300);
context.lineTo(250,300);
context.stroke();
}
