typescript重写canvas --4.画圆角矩形

1.使用 canvas 画圆角矩形

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath(); 
context.moveTo(20,20);
context.lineTo(70,20);
context.arcTo(120,30,120,70,50);
context.lineTo(120,120);
context.stroke();
</script>
</body>
</html>

显示效果如下

4_1.png

2.typescript重写canvas -- 画圆角矩形

html文件

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

</body>
</html>

ts文件

const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d") 
if (context){
    context.beginPath(); 
    context.moveTo(20,20);
    context.lineTo(70,20);
    context.arcTo(120,30,120,70,50);
    context.lineTo(120,120);
    context.stroke();
}

生成的js文件

"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
    context.beginPath();
    context.moveTo(20, 20);
    context.lineTo(70, 20);
    context.arcTo(120, 30, 120, 70, 50);
    context.lineTo(120, 120);
    context.stroke();
}

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 4_2.png

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

html文件

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

</body>
</html>

ts文件

const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d") 
if (context) {
    context.beginPath(); 
    context.moveTo(40,20);
    context.lineTo(100,20);
    context.arcTo(120,20,120,40,20);
    context.lineTo(120,70);
    context.arcTo(120,90,100,90,20);
    context.lineTo(40,90);
    context.arcTo(20,90,20,70,20);
    context.lineTo(20,40);
    context.arcTo(20,20,40,20,20);
    context.stroke();
}

生成的js文件

"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
    context.beginPath(); 
    context.moveTo(40,20);
    context.lineTo(100,20);
    context.arcTo(120,20,120,40,20);
    context.lineTo(120,70);
    context.arcTo(120,90,100,90,20);
    context.lineTo(40,90);
    context.arcTo(20,90,20,70,20);
    context.lineTo(20,40);
    context.arcTo(20,20,40,20,20);
    context.stroke();
}