canvas绘制五角星-白红宇

canvas绘制五角星

阅读量：5064 次

发布时间：2019-06-12

本文共 679 字，大约阅读时间需要 2 分钟。

<!DOCTYPE html>

<body>

var myCanvas = document.getElementById("myCanvas");

var context = myCanvas.getContext('2d');

context.fillStyle = 'rgb(255,100,0)';

context.lineWidth = 5;

var x=720,y=200;

for(var i=0;i<9;i++)

{

context.beginPath();

var x1 = 200*Math.sin(Math.PI/10);

var h1 = 200*Math.cos(Math.PI/10);

var h2 = 100*Math.tan(Math.PI/5);

context.lineTo(x+x1,y+h1);

context.lineTo(x-100,y+h2);

context.lineTo(x+100,y+h2);

context.lineTo(x-x1,y+h1);

context.lineTo(x,y);

context.fill();

}

</script>

</body>

</html>

代码就这样简简单单的完成了，运行结果图片如下：

转载于:https://www.cnblogs.com/kulowreidyql/p/5719037.html

你可能感兴趣的文章

Android Toast

查看>>

iOS开发UI篇—Quartz2D使用（绘制基本图形）

JavaScript基础(四)关于对象及JSON

雨林木风 GHOST_XP SP3 快速装机版YN12.08

Introduction to my galaxy engine 2: Depth of field

查看>>

Python 3.X 练习集100题 05