0
点赞
收藏
分享

微信扫一扫

typescript重写canvas --8.绘制自定义图形

typescript重写canvas --8.绘制自定义图形

1.使用 canvas 绘制自定义图形

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="450" height="400">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
  
context.beginPath(); 
context.moveTo(100, 150);   
context.bezierCurveTo(50, 100, 100, 0, 150, 50);   
context.bezierCurveTo(200, 0, 250, 100, 200, 150);  
context.bezierCurveTo(250, 200, 200, 300, 150, 250);  
context.bezierCurveTo( 100, 300, 50, 200,100, 150);    
context.closePath();  
context.moveTo(100, 150);
context.lineTo(150, 50); 
context.lineTo(200, 150); 
context.lineTo(150, 250); 
context.lineTo(100, 150); 
context.lineWidth = 5;   
context.strokeStyle = "#ff0000";   
context.stroke();   
    
</script>
</body>
</html>

显示效果如下

8.png

2.typescript重写canvas --绘制自定义图形

html文件

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

</body>
</html>

ts文件

const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d") 
if (context){
    context.beginPath(); 
    context.moveTo(100, 150);   
    context.bezierCurveTo(50, 100, 100, 0, 150, 50);   
    context.bezierCurveTo(200, 0, 250, 100, 200, 150);  
    context.bezierCurveTo(250, 200, 200, 300, 150, 250);  
    context.bezierCurveTo( 100, 300, 50, 200,100, 150);    
    context.closePath();  
    context.moveTo(100, 150);
    context.lineTo(150, 50); 
    context.lineTo(200, 150); 
    context.lineTo(150, 250); 
    context.lineTo(100, 150); 
    context.lineWidth = 5;   
    context.strokeStyle = "#ff0000";   
    context.stroke();  
}

生成的js文件

"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
    context.beginPath(); 
    context.moveTo(100, 150);   
    context.bezierCurveTo(50, 100, 100, 0, 150, 50);   
    context.bezierCurveTo(200, 0, 250, 100, 200, 150);  
    context.bezierCurveTo(250, 200, 200, 300, 150, 250);  
    context.bezierCurveTo( 100, 300, 50, 200,100, 150);    
    context.closePath();  
    context.moveTo(100, 150);
    context.lineTo(150, 50); 
    context.lineTo(200, 150); 
    context.lineTo(150, 250); 
    context.lineTo(100, 150); 
    context.lineWidth = 5;   
    context.strokeStyle = "#ff0000";   
    context.stroke();  
}
举报

相关推荐

0 条评论