Fatal编程技术网
  • javascript/
  • Javascript html画布--前/后位置？

Javascript html画布--前/后位置？

javascript html canvas

Javascript html画布--前/后位置？,javascript,html,canvas,Javascript,Html,Canvas,Javascript新手问题——我有以下几点。它把我的矩形画得很好，但总是在后面。我怎样才能把它移到前面 Javascript: function happycode() { var element = document.getElementById("myCanvas"); var context = element.getContext("2d"); context.fillStyle="#FF7700"; context.fillRect(900, 200,

Javascript新手问题——我有以下几点。它把我的矩形画得很好，但总是在后面。我怎样才能把它移到前面

Javascript:

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


//这里有很多元素

首先
width=“2000px”height=“1000px”
不正确，应该是
width=“2000”height=“1000”


position=“absolute”
和
z-index=1000
也不正确，您试图将CSS样式属性当作画布属性来编写。你需要这样写：



这会给你你想要的。示例如下：



请注意，画布的宽度和高度是画布属性，而不是CSS属性。这是一种独特的方式，让很多画布新手感到困惑

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

因此，为了清楚起见，这很好，将制作一个500x500画布：



这很糟糕，将生成一个默认画布（300x150）并将其拉伸到500x500，使所有内容看起来都有奇怪的缩放比例：




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