Home > Article > Web Front-end > How to draw a five-pointed star with js+canvas_javascript skills

How to draw a five-pointed star with js+canvas_javascript skills

WBOYOriginal: 2016-05-16 15:17:241908browse

The example in this article describes the method of drawing a five-pointed star with js+canvas. Share it with everyone for your reference, the details are as follows:

The screenshot of the running effect is as follows:

The specific code is as follows:

<!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>

Readers who are interested in more JavaScript-related content can check out the special topics on this site: "Summary of JavaScript animation special effects and techniques" "Summary of JavaScript motion effects and techniques" and "Summary of JavaScript data structure and algorithm skills》

I hope this article will be helpful to everyone in JavaScript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Encapsulate your own JS components_javascript skillsNext article：Encapsulate your own JS components_javascript skills

See more

How to draw a five-pointed star with js+canvas_javascript skills

Related articles