Question

我正在尝试学习如何使用HTML的Canvas及其属性。现在我想画一个地面和一个天空，我希望天空是屏幕高度的75％，地面是25％。

使用div很容易，并使用CSS或JavaScript CSS Query设置样式。现在我在Canvas上，我无法弄清楚如何设置fillRect属性...

我的代码：

var windowHeight = $(window).height();
var windowWidth = $(window).width();

var skyHeight = windowHeight - (windowHeight * 0.25);
var groundHeight = windowHeight - (windowHeight * 0.75);

ctx = gameCanvas.getContext("2d");

ctx.fillStyle="green";
ctx.fillRect(0,0,windowWidth,windowHeight);

ctx.fillStyle="cyan";
ctx.fillRect(0,0,windowWidth,skyHeight);

另外：如果我尝试使用ie

ctx.fillStyle="cyan";
ctx.fillRect(0,0,30,30);

这会在绿色“地面”背景上绘制一个完美的正方形，但如果我改为ie

ctx.fillRect(0,0,200,200);

它将填满我整个屏幕的高度，超过我屏幕宽度的50％。

根据http://www.w3schools.com/tags/canvas_fillstyle.asp画布fillrect正在使用像素，但200 x 200像素绝对不应该填满我的整个屏幕高度。：/

Answer 1

在哪里告诉画布它的尺寸是什么？就像您需要具有特定大小（视频，图像）的任何其他HTML媒体元素一样，如果您想要可靠大小的内容，您需要告诉它width和height是什么（如果您不要，by convention画布尺寸为300 x 150像素。而且因为我们正在设置我们可以使用的像素数量，所以这不是纯粹的化妆品＆＃34;像CSS一样，我们必须正确地做到这一点：

var cvs = document.querySelector("canvas");

// if you didn't use <canvas width="..." height="...">, we need this:
cvs.width = 800;
cvs.height = 400;

然后你可以做你的绘画：

var ctx = cvs.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0,0.75*cvs.height, cvs.width,0.25*cvs.height);

ctx.fillStyle = "lightblue";
ctx.fillRect(0,0, cvs.width, 0.75*cvs.height);

请参阅http://jsbin.com/tejiqixeji/edit?html,js,output

HTML Canvas fillRect填充窗口高度的25％

1 个答案: