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

Question

我正在尝试学习如何使用 HTML 的 Canvas 及其属性。 现在我正在尝试绘制地面和天空，我希望天空为屏幕高度的 75%，地面为 25%。

这很容易使用 div，并使用 CSS 或 JavaScript CSS Query 设置样式。现在我在画布上，我不知道如何设置 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);  

另外：如果我尝试使用即

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

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

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

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

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

Answer 1

你告诉画布它的尺寸是多少的部分在哪里？就像任何其他需要具有特定大小（视频、图像）的 HTML 媒体元素一样，如果您想要可靠大小的内容（如果您不这样做，则需要告诉它它的 width 和 height 是什么） by convention 画布大小为 300 x 150 像素）。而且因为我们正在设置我们可以绘制的像素数量，这不像 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