如何使用canvas HTML5绘制一个星？

Question

如何使用canvas HTML5绘制一个星？

use*_*832 6 javascript html5 html5-canvas

我试图使用画布绘制一个星,但代码没有运行.我想了解:测量Y和X坐标的步骤是什么？怎么找到他们？绘制任何形状？

<html>
 <head>
   <meta charset = "utf-8">
   <title>Drawing Lines</title>
 </head>
 <body>
   <canvas id = "drawLines" width = "400" height = "200" 
     style = "border: 1px solid Black;">
   </canvas>
   <script>
     var canvas = document.getElementById("drawLines");
     var context = canvas.getContext("2d")

     canvas.beginPath(); 
     canvas.moveTo(50,50);
     canvas.lineTo(120,150);
     canvas.lineTo(0,180); 
     canvas.lineTo(120,210);
     canvas.lineTo(50,310);  
     canvas.lineTo(160,250);
     canvas.lineTo(190,370);
     canvas.lineTo(220,250);
     canvas.lineTo(330,310);
     canvas.lineTo(260,210);
     canvas.lineTo(380,180);
     canvas.closePath();
     canvas.stroke();
   </script>
 </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

mar*_*rkE 30

星形基本上是正多边形,在内半径和外半径上具有交替点.

这是一个绘制星形的灵活函数的示例.

您可以设置位置,#spikes以及尖峰的内外半径:

在此输入图像描述

示例代码和演示:http: //jsfiddle.net/m1erickson/8j6kdf4o/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    function drawStar(cx,cy,spikes,outerRadius,innerRadius){
      var rot=Math.PI/2*3;
      var x=cx;
      var y=cy;
      var step=Math.PI/spikes;

      ctx.beginPath();
      ctx.moveTo(cx,cy-outerRadius)
      for(i=0;i<spikes;i++){
        x=cx+Math.cos(rot)*outerRadius;
        y=cy+Math.sin(rot)*outerRadius;
        ctx.lineTo(x,y)
        rot+=step

        x=cx+Math.cos(rot)*innerRadius;
        y=cy+Math.sin(rot)*innerRadius;
        ctx.lineTo(x,y)
        rot+=step
      }
      ctx.lineTo(cx,cy-outerRadius);
      ctx.closePath();
      ctx.lineWidth=5;
      ctx.strokeStyle='blue';
      ctx.stroke();
      ctx.fillStyle='skyblue';
      ctx.fill();
    }

    drawStar(100,100,5,30,15);

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Den*_*s S 9

The function can be shorter with coordinate translate:

function strokeStar(x, y, r, n, inset) {
    ctx.save();
    ctx.beginPath();
    ctx.translate(x, y);
    ctx.moveTo(0,0-r);
    for (var i = 0; i < n; i++) {
        ctx.rotate(Math.PI / n);
        ctx.lineTo(0, 0 - (r*inset));
        ctx.rotate(Math.PI / n);
        ctx.lineTo(0, 0 - r);
    }
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

Run Code Online (Sandbox Code Playgroud)

Answer 3

V. *_*tti 2

这些函数，lineTo()、moveTo()、strike() 等...属于上下文对象，而不是画布对象。您是否正在检查您的开发者控制台（Chrome 中的 f12）？您会看到这些函数是未定义的。

归档时间：	11 年，2 月前
查看次数：	24723 次
最近记录：	7 年，11 月前