html5中怎么做五角星
时间:2021-06-28
来源:互联网
今天PHP爱好者给大家带来在html5中,可以通过canvas标签,以及相关的JavaScript属性和方法来画五角星;canvas标签用于通过脚本(通常是JavaScript)动态绘制图形。希望对大家有所帮助。
本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制五角星方法,感兴趣的小伙伴们可以参考一下
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。
<canvas></canvas>只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在<canvas>>元素上绘图主要有三步:
1.获取<canvas>元素对应的DOM对象,这是一个Canvas对象;
2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
3.调用CanvasRenderingContext2D对象进行绘图。
通过对五角星分析,我们可以确定各个顶点坐标的规律,这里需要注意的一点是:在canvas中,Y轴的方向是向下的。
相应代码如下:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
//设置是个顶点的坐标,根据顶点制定路径
for (var i = 0; i < 5; i++) {
context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,
-Math.sin((18+i*72)/180*Math.PI)*200+200);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,
-Math.sin((54+i*72)/180*Math.PI)*80+200);
}
context.closePath();
//设置边框样式以及填充颜色
context.lineWidth="3";
context.fillStyle = "#F6F152";
context.strokeStyle = "#F5270B";
context.fill();
context.stroke();
最后效果:
以上就是html5中怎么做五角星的详细内容,更多请关注php爱好者其它相关文章!
-
怪猎荒野隆炉球石怎么获取 怪物荒野隆炉球石获取攻略介绍 时间:2025-05-09
-
怪猎荒野隆炉球石怎么获取 怪物荒野隆炉球石获取攻略介绍 时间:2025-05-09
-
洛克王国世界罗隐进化路线详解-罗隐培养 时间:2025-05-09
-
倩女幽魂怎么快速修仙-修仙境界之快速提升 时间:2025-05-09
-
洛克王国世界罗隐进化路线详解-罗隐培养 时间:2025-05-09
-
倩女幽魂入坑必看-倩女幽魂怎么玩新手零氪 时间:2025-05-09
今日更新
-
wps页码怎么从第3页开始设置页码
阅读:18
-
PHP中PDO如何关闭连接
阅读:18
-
PHP中什么是自定义异常处理类?如何解决自定义异常处理类?
阅读:18
-
如何在PHPStorm中使用region(代码折叠)
阅读:18
-
三分钟带你了解PHP中的初始化PDO及原始SQL语句操作
阅读:18
-
详解WordPress文章阅读量如何统计和显示(非插件)
阅读:18
-
html中按钮颜色怎么设置
阅读:18
-
html5和web前端的区别是什么
阅读:18
-
PHP高级实战-文件—上传类的成员属性有哪些?
阅读:18
-
html页面如何弹警示框
阅读:18