js画布绘制五角星的方法

本文实例讲述了射流研究…画布绘制五角星的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title画布绘制五角星/title脚本类型=' text/JavaScript '窗口。onload=function(){ var canvas=document。getelementbyid(' canvas ')；if(canvas){ var context=canvas。get context(' 2d ')；drawStar(上下文，50,100,100);} else { document.writeln('浏览器不支持帆布组件');} }函数drawStar(context，r，x，y){ context。线宽=5；语境。begin path()；var dit=数学* 4/5；var sin=数学。sin(0)* r y；var cos=数学。cos(0)* r x；控制台。日志(0 ' : ' 0)；context.moveTo(cos，sin)；for(var I=0；i5；I){ var Tempdit=dit * I；罪恶=数学。sin(Tempdit)* r y；cos=数学。cos(Tempdit)* r x；context.lineTo(cos，sin)；控制台。日志(sin ' : ' sin ' : ' Tempdit)；}上下文。close path()；context . strokestyle=' redcontext . fillstyle=' # DDDDDDcontext。fill()；}/script/head dycanvas id=' canvas '/canvas/body/html更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript动画特效与技巧汇总》 《JavaScript运动效果与技巧汇总》 及《JavaScript数据结构与算法技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。