用canvas属性写一个五角星哦
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用canvas属性写一个五角星哦相关的知识，希望对你有一定的参考价值。
canvas属性中的线条属性学完后，就可以自己写一个简单好看的五角星啦
先是最简单的画布属性的获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> </style> </head> <body> <canvas id="canvas" width="800" height="800" style="border:solid 1px gray;"> 您的浏览器不支持canvas，建议使用最新版的Chrome </canvas> <script type="text/javascript"> var canvas=document.getElementById(‘canvas‘); var ctx=canvas.getContext(‘2d‘);
</script>
</body>
</html>
对于不支持<canvas></canvas>属性的浏览器，上面那段文字就会跳出提示信息。而支持则会忽视上诉文字。
接着就是js部分的编写了
window.onload=function(){ drawStar(ctx,200,100,400,400,30); } function drawStar(cxt,r,R,x,y,rot){ cxt.lineWidth=10; cxt.lineJoin="round"; cxt.beginPath(); for(var i=0; i<=5; i++){ cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y); cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y); } cxt.closePath(); cxt.stroke(); }
上诉代码中，我们写了一个drawStar（）的函数，传进了6个参数，分别为：cxt（绘图环境），r（代表小圆半径），R（大圆半径），x（在x轴上的移动量），y（在y轴上的移动量），rot（整个五角星的偏移量）。
cxt.lineWidth:这个属性是线条的宽度。
cxt.lineJoin:这个属性是线条交接处的处理方式。有“bevel”,"round","mitter"三个属性，分别什么样子呢，自己试试吧。其中mitter还有mitterLimit这个属性。canvas给这个属性一个适合值为10，所以如果要用cxt.mitterLimit=10;就这样写啦！
路径开始beginPath(),路径结束closePath();(PS: closePath() 多写有好处，不写也还好，但有时候会有小问题)。
接下来这个for循环就是五角星的绘制。那绘制五角星其实是基于一个同心圆上的，就像这样
lineTo()里面两个参数分别为坐标（x，y），其中需要计算x，y对应的表达式，对于数学都很帮帮的你们来说，小case啦！
最后用两个lineTo（）绘制线段，连接起来，用Stroke（）画出图形，再调用drawStar()函数就好了。参数不同，五角星也不一样哦！！
以上是关于用canvas属性写一个五角星哦的主要内容，如果未能解决你的问题，请参考以下文章