信鸽网

js+canvas绘制五角星的方法

  作者：bea

本文实例讲述了js+canvas绘制五角星的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&l

本文实例讲述了js+canvas绘制五角星的方法。分享给大家供大家参考，具体如下：


运行效果截图如下：



具体代码如下：




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>canvas绘制五角星 </title>

  <script type="text/javascript" >

    window.onload = function () {

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

      if (canvas) {

        var context = canvas.getContext("2d");

        drawStar(context, 50, 100, 100);

      } else {

        document.writeln("浏览器不支持canvas组件");

      }

    }

    function drawStar(context, r, x, y) {

      context.lineWidth = 5;

      context.beginPath();

      var dit = Math.PI * 4 / 5;

      var sin = Math.sin(0) * r + y;

      var cos = Math.cos(0) * r + x;

      console.log(0+":"+0);

      context.moveTo(cos, sin);

      for (var i = 0; i < 5; i++) {

        var tempDit = dit * i;

        sin = Math.sin(tempDit) * r + y;

        cos = Math.cos(tempDit) * r + x;

        context.lineTo(cos, sin);

        console.log(sin+":"+sin+":"+tempDit);

      }

      context.closePath();

      context.strokeStyle = "red";

      context.fillStyle = "#DDDDDD";

      context.fill();

    }

  </script>

</head>

<body>

<canvas id="canvas" ></canvas>

</body>

</html>


更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》《JavaScript运动效果与技巧汇总》及《JavaScript数据结构与算法技巧总结》


希望本文所述对大家JavaScript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: