typescript重写canvas --2.画矩形-CFANZ编程社区

typescript重写canvas --2.画矩形

1.使用 canvas 画矩形

<!DOCTYPE HTML>
<html>
<head>
  <meta charset=utf-8 />
</head>
<body>
<canvas id=myCanvas width=200 height=100>
你的浏览器不支持HTML5
</canvas>
<script type=text/javascript>
var canvas=document.getElementById(myCanvas);
var context=canvas.getContext(2d);
context.lineWidth = 5;
context.strokeStyle = red;
context.beginPath();
context.strokeRect(10,10,70,40);
</script>
</body>
</html>

显示效果如下

画矩形 2_1.png

2.typescript重写canvas -- 画矩形

html文件

<!DOCTYPE HTML>
<html>
<body>
<canvas id=myCanvas width=200 height=100>
你的浏览器不支持HTML5
</canvas>
<script src=./js/2.js></script>

</body>
</html>

ts文件

const canvas=<HTMLCanvasElement>document.getElementById(myCanvas)
const context=canvas.getContext(2d) 
if (context){
    context.lineWidth = 5;
    context.strokeStyle = red;
    context.beginPath();
    context.strokeRect(10,10,70,40);
}

生成的js文件

use strict;
const canvas = document.getElementById(myCanvas);
const context = canvas.getContext(2d);
if (context) {
    context.lineWidth = 5;
    context.strokeStyle = red;
    context.beginPath();
    context.strokeRect(10, 10, 70, 40);
}

3.使用 canvas 画矩形2

<!DOCTYPE HTML>
<html>
<head>
  <meta charset=utf-8 />
</head>
<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 = 5;
context.fillStyle = red;
context.beginPath();
context.fillRect(10,10,70,40);
</script>
</body>
</html>

显示效果如下

画矩形2 2_2.png

4.typescript重写canvas -- 画矩形2

html文件

<!DOCTYPE HTML>
<html>
<body>
<canvas id=myCanvas width=200 height=100>
你的浏览器不支持HTML5
</canvas>
<script src=./js/2_2.js></script>

</body>
</html>

ts文件

const canvas=<HTMLCanvasElement>document.getElementById(myCanvas)
const context=canvas.getContext(2d) 
if (context) {
    context.lineWidth = 5;
    context.fillStyle = red;
    context.beginPath();
    context.fillRect(10, 10, 70, 40);
}

生成的js文件

use strict;
const canvas = document.getElementById(myCanvas);
const context = canvas.getContext(2d);
if (context) {
    context.lineWidth = 5;
    context.fillStyle = red;
    context.beginPath();
    context.fillRect(10, 10, 70, 40);
}

0 条评论