用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属性写一个五角星哦的主要内容,如果未能解决你的问题,请参考以下文章

canvas纯绘制雨伞飞机五角星桃心,无逻辑可复制

怎么用python画三角形并填色?以及画五角星并且填色?(急!!!)

canvas绘图

canvas绘制五角形

canvas用这个属性来画组合图形

用Canvas和属性动画造一只萌蠢的“小鬼”