typescript重写canvas --1.画线
1.使用 canvas 画线
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
let canvas=document.getElementById("myCanvas");
let context=canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle = "red";
context.beginPath();
context.moveTo(10,10);
context.lineTo(150,50);
context.stroke();
</script>
</body>
</html>
显示效果如下

2.typescript重写canvas -- 画线
html文件
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持HTML5
</canvas>
<script src="./js/1.js"></script>
</body>
</html>
ts文件
let canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
let context=canvas.getContext("2d")
if (context){
context.lineWidth = 10;
context.strokeStyle = "red";
context.beginPath();
context.moveTo(10,10);
context.lineTo(150,50);
context.stroke();
}
生成的js文件
"use strict";
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
if (context) {
context.lineWidth = 10;
context.strokeStyle = "red";
context.beginPath();
context.moveTo(10, 10);
context.lineTo(150, 50);
context.stroke();
}
3.使用 canvas 画线2
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
const canvas=document.getElementById("myCanvas");
const context=canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle = "red";
context.lineCap="butt";
context.beginPath();
context.moveTo(10,10);
context.lineTo(150,10);
context.stroke();
context.lineCap="round";
context.beginPath();
context.moveTo(10,40);
context.lineTo(150,40);
context.stroke();
context.lineCap="square";
context.beginPath();
context.moveTo(10,70);
context.lineTo(150,70);
context.stroke();
</script>
</body>
</html>
显示效果如下

4.typescript重写canvas -- 画线2
html文件
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持HTML5
</canvas>
<script src="./js/1_2.js"></script>
</body>
</html>
ts文件
const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d")
if (context){
context.lineWidth = 10;
context.strokeStyle = "red";
context.lineCap="butt";
context.beginPath();
context.moveTo(10,10);
context.lineTo(150,10);
context.stroke();
context.lineCap="round";
context.beginPath();
context.moveTo(10,40);
context.lineTo(150,40);
context.stroke();
context.lineCap="square";
context.beginPath();
context.moveTo(10,70);
context.lineTo(150,70);
context.stroke();
}
生成的js文件
"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
context.lineWidth = 10;
context.strokeStyle = "red";
context.lineCap = "butt";
context.beginPath();
context.moveTo(10, 10);
context.lineTo(150, 10);
context.stroke();
context.lineCap = "round";
context.beginPath();
context.moveTo(10, 40);
context.lineTo(150, 40);
context.stroke();
context.lineCap = "square";
context.beginPath();
context.moveTo(10, 70);
context.lineTo(150, 70);
context.stroke();
}