Question

您好我有以下脚本，但是当我在Chrome中运行它时，我看不到结果。我错过了什么？我需要添加什么才能看到我的结果。

＆＃13;

<script>
noStroke();
var leftX = 145;
var rightX = 274;
var sunRadius = 100;
var draw = function() {
    background(184, 236, 255);
    fill(255, 170, 0);
    ellipse(200, 100, sunRadius, sunRadius);
// clouds
   fill(255, 255, 255);
    // left cloud
    ellipse(leftX, 150, 126, 97);
    ellipse(leftX+62, 150, 70, 60);
    ellipse(leftX-62, 150, 70, 60);
    // right cloud
    ellipse(rightX, 100, 126, 97);
    ellipse(rightX+62, 100, 70, 60);
    ellipse(rightX-62, 100, 70, 60);
    leftX--;
    rightX++;
    sunRadius+=2;
};
</script>

＆＃13;

Answer 1

无论noStroke（以及fill和`background等其他函数）是什么，请确保它们已在您的代码中定义，否则函数的其余部分将无法执行。
你的函数没有被调用的原因......是因为你没有调用它。

在声明函数后添加对draw的调用。代码的结尾应如下所示：

    leftX--;
    rightX++;
    sunRadius+=2;
};
draw(); //Actually run the function

Answer 2

我认为椭圆对画布来说是新的。我在github找到了向后兼容的功能。

var can = document.getElementById('can');
var ctx = can.getContext('2d');

var leftX = 145;
var rightX = 274;
var sunRadius = 100;

draw();

function draw() {
  ctx.fillStyle = "rgb(184, 236, 255)";
  ctx.fillRect(0, 0, can.width, can.height);

  ctx.beginPath();
  ellipse(200, 100, sunRadius, sunRadius);
  ctx.fillStyle = "rgb(255, 170, 0)";
  ctx.fill();

  // clouds
  ctx.fillStyle = "rgb(255, 255, 255)";
  // left cloud
  ctx.beginPath();
  ellipse(leftX, 150, 126, 97);
  ellipse(leftX + 62, 150, 70, 60);
  ellipse(leftX - 62, 150, 70, 60);
  ctx.fill();
  // right cloud
  ctx.beginPath();
  ellipse(rightX, 100, 126, 97);
  ellipse(rightX + 62, 100, 70, 60);
  ellipse(rightX - 62, 100, 70, 60);
  ctx.fill();
  leftX--;
  rightX++;
  sunRadius += 2;
};

function ellipse(cx, cy, w, h) {
  var rx = w / 2;
  var ry = h / 2;
  var rot = 0;
  var aStart = 0;
  var aEnd = Math.PI * 2;
  florianEllipse(ctx, cx, cy, rx, ry, rot, aStart, aEnd);
}

function florianEllipse(context, cx, cy, rx, ry, rot, aStart, aEnd){
  context.save();
  context.translate(cx, cy);
  context.rotate(rot);
  context.translate(-rx, -ry);
  
  context.scale(rx, ry);
  context.arc(1, 1, 1, aStart, aEnd, false);
  context.restore();
}

<canvas id="can" width="400" height="300"></canvas>

看不到脚本结果

2 个答案: