html canvas - позиция спереди/сзади?

Javascript newbie question - У меня есть следующее. Он рисует мой прямоугольник просто отлично, но всегда сзади. Как перенести его на передний план?html canvas - позиция спереди/сзади?

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>

источник

2012-03-23 William Jockusch

первая от 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>

источник

2012-03-23 14:15:38

'г-index' также свойство CSS, а не атрибут HTML. – RoToRa

Упс! Исправлено, спасибо! –

html canvas - позиция спереди/сзади?

ответ

Смежные вопросы