How to draw a star by using canvas HTML5?

前端 未结 5 2148
伪装坚强ぢ
伪装坚强ぢ 2021-01-05 09:04

Am trying to draw a star using canvas, but the code is not running. I want to understand: what are the steps to measure the Y and X coordinate? How to find them? to draw any

5条回答
  •  不思量自难忘°
    2021-01-05 09:14

    //function to draw star with N spikes
    //centered on a circle of radius R, centered on (cX,cY)
    function star(R, cX, cY, N) {
      //star draw
      ctx.beginPath();
      ctx.moveTo(cX + R,cY);
      for(var i = 1; i <= N * 2; i++)
      {
        if(i % 2 == 0){
          var theta = i * (Math.PI * 2) / (N * 2);
          var x = cX + (R * Math.cos(theta));
          var y = cY + (R * Math.sin(theta));
        } else {
          var theta = i * (Math.PI * 2) / (N * 2);
          var x = cX + ((R/2) * Math.cos(theta));
          var y = cY + ((R/2) * Math.sin(theta));
        }
    
        ctx.lineTo(x ,y);
      }
      ctx.closePath();
      ctx.stroke();
    }
    

自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题