无法查看脚本结果

Cannot see script result

本文关键字：脚本 结果      更新时间：2023-09-26

嗨，我有下面的脚本，但当我在Chrome中运行它时，我看不到结果。我错过了什么？我必须向html添加什么才能看到我的结果。

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

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

在声明函数后添加对draw的调用。代码的末尾应该是这样的：

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

我认为椭圆对于画布来说是新的。我在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>

相关文章：