typescript重写canvas --6.画曲线-CFANZ编程社区

typescript重写canvas --6.画曲线

1.使用 canvas 画曲线

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

显示效果如下

2.typescript重写canvas --画曲线

html文件

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

</body>
</html>

ts文件

const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d") 
if (context){
    context.fillStyle = "red";
    context.beginPath();
    context.fillRect(10,10,200,100);
    context.clearRect(30,30,50,50);
}

生成的js文件

"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
    context.beginPath();
    context.moveTo(100, 100);
    context.quadraticCurveTo(20, 50, 200, 20);
    context.stroke();
}

0 条评论