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>

显示效果如下

画线 1_1.png

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>

显示效果如下

画线 1_2.png

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();
}