Question

Javascript新手问题 - 我有以下内容。它绘制我的矩形很好，但总是在后面。我该怎么把它移到前面？

使用Javascript：

function happycode() {
    var element = document.getElementById("myCanvas");
    var context = element.getContext("2d");
    context.fillStyle="#FF7700";
    context.fillRect(900, 200, 300, 300);
};

HTML：

<body onload=happycode();>
     // lots of elements here
    <canvas position="absolute" id="myCanvas"width="2000px"height="1000px"z-index=1000></canvas>
</body>

Answer 1

首先关闭width="2000px"height="1000px"不正确，应该是width="2000" height="1000"

position="absolute"和z-index=1000也不正确，您正在尝试编写CSS样式属性，就好像它们是画布属性一样。你需要写这个：

<canvas id="myCanvas" width="2000" height="1000" style="z-index:1000; position: absolute; top: 0px; left: 0px;"></canvas>

这会给你你想要的东西。示例：http://jsfiddle.net/FpDe6/

请注意，画布的宽度和高度是画布属性，而不是 CSS属性。这有点独特，让很多画布新人感到困惑。

如果将CSS宽度/高度设置为某个像素值，则不会更改画布本身的大小，而是拉伸画布并使其看起来非常奇怪。

所以要明确一点，这很好，并且会制作500x500画布：

<canvas id="myCanvas" width="500" height="500"></canvas>

这很糟糕，并且会制作一个默认画布（300x150）并将其拉伸到500x500，使得所有内容看起来都很奇怪：

<canvas id="myCanvas" style="width: 500px; height: 500px;"></canvas>

html canvas - 前/后位置？

1 个答案: