HTML-холст - положение спереди / сзади? - PullRequest
Новая
       1

HTML-холст - положение спереди / сзади?

1 голос
/ 23 марта 2012

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>

1 Ответ

2 голосов
/ 23 марта 2012

first off width="2000px"height="1000px" неверно, просто должно быть width="2000" height="1000"

position="absolute" и z-index=1000 также неверно, вы пытаетесь написать атрибуты стиля CSS, как если бы они были атрибутами canvas,Вам нужно написать это:

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

И это даст вам то, что вы хотите.Пример здесь: http://jsfiddle.net/FpDe6/

Обратите внимание, что ширина и высота холста являются атрибутами холста, а не атрибутами CSS.Это уникально и сбивает с толку многих новичков в работе с холстами.

Если вы установите ширину / высоту CSS равным значению пикселя, вы не будете изменять размер самого холста, а вместо этого растягиваете холст ивсе выглядит очень странно.

Так что, чтобы было ясно, это хорошо, и сделает холст 500х500:

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

Это плохо, и сделаетхолст по умолчанию (300x150) и растяните его до 500x500, чтобы все выглядело странно в масштабе:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...