我正在尝试填充我制作的椭圆,但是虽然我可以用它来绘制轮廓,但我无法用它来填充它。我查看了很多资源,包括http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/和https://developer.mozilla.org/en-US/docs/Web/ Guide/HTML/Canvas_tutorial/Drawing_shapes,但按照那里的建议并没有解决问题。我试图解释其他错误——比如拼写错误、传递参数错误或我的椭圆绘图方法错误,但它们都可以独立工作。我可以画出椭圆的轮廓。我可以将上下文传递给函数。我可以填充一个非椭圆。但我无法填充我的椭圆。代码如下所示:
main();
function main(){
var canvas = document.getElementById('landscape');
var context = canvas.getContext('2d');
// var mySky = new sky(0, 0);
// mySky.render(context);
var myLake = new lake(400, 500, context);
myLake.render(context);
var ctx = context;
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
function lake(x, y, context){
this.context = context;
this.x = x;
this.y = y;
var width = this.context.canvas.width/2;
var height = this.context.canvas.height/4;
var a = width/2;
var b = height/2;
var phi = Math.PI/2;
this.render = function(context){
var inc = (2*Math.PI)/200;
var end = 200*inc;
var oldX = oldY = newX = newY = 0;
var x_0 = xcoord(0);
var y_0 = ycoord(0);
console.log("" + x_0 + ", " + y_0);
var i = 0;
context.beginPath();
context.moveTo(x_0, y_0);
while(i < end){
i += inc;
newX = xcoord(i);
newY = ycoord(i);
context.lineTo(newX, newY);
context.moveTo(newX, newY);
console.log("" + newX + ", " + newY);
}
context.lineTo(x_0, y_0); // close up the ellipse
context.moveTo(x_0, y_0);
context.closePath();
context.fillStyle = '#6EB1F5';
context.fill();
}
function xcoord(t){
return x + a*Math.cos(t)*Math.sin(phi) + b*Math.sin(t)*Math.cos(phi);
}
function ycoord(t){
return y + a*Math.cos(t)*Math.cos(phi) - b*Math.sin(t)*Math.sin(phi);
}
我是否正确使用了 fill() 函数?是因为我的椭圆没有正确闭合吗?如果可能的话,请不要给我太多信息——我想自己做,我只是不知道出了什么问题,我现在花了将近 3 个小时试图解决这个问题。