标签：文字 10 canvas typescript const myCanvas getContext context
typescript重写canvas --10.绘制文字2
1.使用 canvas 绘制文字
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="450" height="400">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//设定文字大小和字体
context.font="30px Arial";
//描画文字
context.strokeText("Good!",100,50);
</script>
</body>
</html>
显示效果如下
2.typescript重写canvas --绘制文字
html文件
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="450" height="400">
你的浏览器不支持HTML5
</canvas>
<script src="./js/10.js"></script>
</body>
</html>
ts文件
const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d")
if (context){
//设定文字大小和字体
context.font="30px Arial";
//描画文字
context.strokeText("Good!",100,50);
}
生成的js文件
"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
//设定文字大小和字体
context.font="30px Arial";
//描画文字
context.fillText("Good!",100,50);
}
标签：文字,
10,
canvas,
typescript,
const,
myCanvas,
getContext,
context
From： https://blog.51cto.com/u_14483476/6247989