Javascript 如何使用画布HTML5绘制星星？_Javascript_Html_Html5 Canvas

Javascript 如何使用画布HTML5绘制星星？

javascript html html5-canvas

Javascript 如何使用画布HTML5绘制星星？,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我试图用画布画一个星星，但是代码没有运行。我想了解：测量Y和X坐标的步骤是什么？如何找到它们？画什么形状 <html> <head> <meta charset = "utf-8"> <title>Drawing Lines</title> </head> <body> <canvas id = "drawLines" width = "400" height = "200"

我试图用画布画一个星星，但是代码没有运行。我想了解：测量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>


画线
var canvas=document.getElementById（“drawLines”）；
var context=canvas.getContext（“2d”）
canvas.beginPath（）；
canvas.moveTo（50,50）；
canvas.lineTo（120150）；
canvas.lineTo（0180）；
canvas.lineTo（120210）；
canvas.lineTo（50310）；
canvas.lineTo（160250）；
canvas.lineTo（190370）；
canvas.lineTo（220250）；
canvas.lineTo（330310）；
canvas.lineTo（260210）；
canvas.lineTo（380180）；
canvas.closePath（）；
canvas.stroke（）；

那些函数，lineTo（），moveTo（），stroke（）等等。。。属于上下文对象，而不是画布对象。您是否正在检查开发人员控制台（Chrome中的f12）？您将看到这些函数是未定义的。

正如@v-rubinetti所提到的，您试图错误地调用方法

虽然通过编码可以很容易地在画布上绘制一个简单的星星，但绘制高级的东西却很复杂。您可以使用开源的矢量图形软件，如与扩展一起绘制高级矢量图形，并将其保存到html5文档中

例如，以下是在Inkscape中绘制的25角星形，并使用ink2canvas扩展保存：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Inkscape Output</title>
</head>
<body>
    <canvas id='canvas' width='320' height='320'></canvas>
    <script>
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.save();
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.lineWidth = 1.000000;
    ctx.fillStyle = 'rgb(255, 255, 0)';
    ctx.beginPath();
    ctx.transform(0.506236, 0.000000, 0.000000, 0.505711, 82.274469, 51.410524);
    ctx.moveTo(342.857130, 449.505040);
    ctx.lineTo(234.764940, 344.516400);
    ctx.lineTo(279.468630, 488.419550);
    ctx.lineTo(200.881970, 359.847880);
    ctx.lineTo(208.393950, 510.347410);
    ctx.lineTo(164.250710, 366.271350);
    ctx.lineTo(134.098980, 513.910810);
    ctx.lineTo(127.172840, 363.383190);
    ctx.lineTo(61.251941, 498.885850);
    ctx.lineTo(91.978093, 351.364870);
    ctx.lineTo(-5.569921, 466.216610);
    ctx.lineTo(60.877887, 330.971560);
    ctx.lineTo(-62.167941, 417.955810);
    ctx.lineTo(35.826363, 303.484630);
    ctx.lineTo(-104.985860, 357.135850);
    ctx.lineTo(18.397601, 270.631190);
    ctx.lineTo(-131.333260, 287.578290);
    ctx.lineTo(9.686712, 234.475540);
    ctx.lineTo(-139.554650, 213.653670);
    ctx.lineTo(10.241036, 197.289490);
    ctx.lineTo(-129.133450, 140.006950);
    ctx.lineTo(20.025741, 161.409550);
    ctx.lineTo(-100.724450, 71.265628);
    ctx.lineTo(38.426018, 129.090210);
    ctx.lineTo(-56.112700, 11.748970);
    ctx.lineTo(64.285711, 102.362200);
    ctx.lineTo(1.898679, -34.803371);
    ctx.lineTo(95.979959, 82.904945);
    ctx.lineTo(69.664621, -65.466342);
    ctx.lineTo(131.517300, 71.941014);
    ctx.lineTo(142.927140, -78.313274);
    ctx.lineTo(168.664780, 70.159311);
    ctx.lineTo(217.082890, -72.536949);
    ctx.lineTo(205.088300, 77.671789);
    ctx.lineTo(287.472380, -48.500313);
    ctx.lineTo(238.499240, 94.006409);
    ctx.lineTo(349.672790, -7.713676);
    ctx.lineTo(266.798250, 118.136810);
    ctx.lineTo(399.775840, 47.260185);
    ctx.lineTo(288.207210, 148.546780);
    ctx.lineTo(434.633360, 112.967060);
    ctx.lineTo(301.380910, 183.325570);
    ctx.lineTo(452.055130, 185.278350);
    ctx.lineTo(305.491610, 220.287880);
    ctx.lineTo(450.946490, 259.650470);
    ctx.lineTo(300.281000, 257.111240);
    ctx.lineTo(431.377070, 331.410340);
    ctx.lineTo(286.076510, 291.481900);
    ctx.lineTo(394.576520, 396.049020);
    ctx.lineTo(263.770630, 321.240230);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    </script>
</body>
</html>


Inkscape输出
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
ctx.save（）；
ctx.lineJoin='miter'；
ctx.strokeStyle='rgb（0,0,0）'；
ctx.lineCap=‘对接’；
ctx.lineWidth=1.000000；
ctx.fillStyle='rgb（255，255，0）'；
ctx.beginPath（）；
转换（0.506236,0.000000,0.000000,0.505711,82.274469,51.410524）；
ctx.moveTo（342.857130449.505040）；
ctx.lineTo（234.764940344.516400）；
ctx.lineTo（279.468630488.419550）；
ctx.lineTo（200.881970，359.847880）；
ctx.lineTo（208.393950510.347410）；
ctx.lineTo（164.250710366.271350）；
ctx.lineTo（134.098980513.910810）；
ctx.lineTo（127.172840、363.383190）；
ctx.lineTo（61.251941498.885850）；
ctx.lineTo（91.978093351.364870）；
ctx.lineTo（-5.569921466.216610）；
ctx.lineTo（60.877887330.971560）；
ctx.lineTo（-62.167941417.955810）；
ctx.lineTo（35.826363303.484630）；
ctx.lineTo（-104.985860357.135850）；
ctx.lineTo（18.397601、270.631190）；
ctx.lineTo（-131.333260，287.578290）；
ctx.lineTo（9.686712134.475540）；
ctx.lineTo（-139.554650213.653670）；
ctx.lineTo（10.241036197.289490）；
ctx.lineTo（-129.133450，140.006950）；
ctx.lineTo（20.02574161.409550）；
ctx.lineTo（-100.724450,71.265628）；
ctx.lineTo（38.426018129.090210）；
ctx.lineTo（-56.112700,11.748970）；
ctx.lineTo（64.285711102.362200）；
ctx.lineTo（1.898679，-34.803371）；
ctx.lineTo（95.979959,82.904945）；
ctx.lineTo（69.664621，-65.466342）；
ctx.lineTo（131.517300,71.941014）；
ctx.lineTo（142.927140，-78.313274）；
ctx.lineTo（168.664780,70.159311）；
ctx.lineTo（217.082890，-72.536949）；
ctx.lineTo（205.088300,77.671789）；
ctx.lineTo（287.472380，-48.500313）；
ctx.lineTo（238.499240，94.006409）；
ctx.lineTo（349.672790，-7.713676）；
ctx.lineTo（266.798250118.136810）；
ctx.lineTo（399.775840,47.260185）；
ctx.lineTo（288.207210148.546780）；
ctx.lineTo（434.633360112.967060）；
ctx.lineTo（301.380910183.325570）；
ctx.lineTo（452.055130、185.278350）；
ctx.lineTo（305.491610、220.287880）；
ctx.lineTo（450.946490259.650470）；
ctx.lineTo（300.281000257.111240）；
ctx.lineTo（431.377070331.410340）；
ctx.lineTo（286.076510291.481900）；
ctx.lineTo（394.576520、396.049020）；
ctx.lineTo（263.77063021.240230）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；

恒星基本上是一个正多边形，内半径和外半径上有交替点

下面是一个绘制星形的灵活函数示例

您可以设置位置、#尖峰以及尖峰的内外半径：

示例代码和演示：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
函数drawStar（cx、cy、尖峰、外半径、内半径）{
var rot=数学PI/2*3；
var x=cx；
var y=cy；
var阶跃=Math.PI/峰值；
ctx.beginPath（）；
ctx.moveTo（cx、cy外租）
用于（i=0；i//函数）绘制带有N个尖峰的星形
//以半径为R的圆为中心，以（cX，cY）为中心
功能星（R、cX、cY、N）{
//明星抽签
ctx.beginPath（）；
ctx.移动到（cX+R，cY）；
对于（var i=1；i而言，使用坐标平移可以缩短函数：
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();
}

函数strokeStar（x、y、r、n、插图）{
ctx.save（）；
ctx.beginPath（）；
ctx.translate（x，y）；
ctx.moveTo（0,0-r）；
对于（变量i=0；i当您可以简单地从SVG文件中提取数据时，为什么要将SVG文件转换为代码：将数据硬编码到代码中被认为是一种不好的做法。我还可以如何回答有关上下文方法的问题？在画布与SVG的辩论中，我没有偏袒任何一方。选择最适合您的方法（例如，对于游戏，画布效果最好）。您可能想重新阅读我的评论。我甚至没有说过在画布上使用SVG。没有回答问题。正在查看“测量x和y”和“绘制任何形状”。应该对此进行一些计算，以获得相关的答案。是的，我正在通过Chrome检查控制台。如何定义它们？如何将它们写入画布对象？谢谢，我刚刚做了大约3次
//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();
}

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();
}