канва проблемы
Кто нибудь сталкивался с изменениями размеров канвы после её объявления?
1 при изменении размеров появляется вторая пара свойств... 2 центр уходит сам по себе ........................................ |
Цитата:
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.beginPath();
ctx.arc(*!*canvas.width/2,canvas.height/2*/!*,50,0,Math.PI*2,true);
ctx.stroke();
</script>
|
Цитата:
попробуй канве явно задать размеры при её создании в теге,а затем измени и просмотри через фаербаг-будет две пары атрибутов высоты и ширины.если задать начало координат,то после измения размеров оно окажется не там где было. если до изменения размеров загрузить изображение с явно заданными размерами ,то после изменения размеров канвы оно займёт(даже если его заново загрузить задав явно теже размеры) оно займёт столько же % от площади канвы как и было до изменения её размеров. единственное что помогло удержать контроль -так это перезапись тега канвы с явно заданными размерами-это позволило загружать изображения контролируя их размеры и начало координат-но не во всех браузерах прошло. в старых вообще сбивало координаты и размеры контейнеров содержащих канву на координаты и размеры до изменения-канва хоть и была заменена на новую продолжала существовать со старыми размерами именем содержимым... |
свойства canvas.width|height - Это разрешение канваса в пикселах, а canvas.style.width|height - просто размеры.
Если canvas.style.width|height не заданы, то размеры канвы совпадают с цифрами canvas.width|height (которые если не заданы равны 300х200)
<canvas style = "border: 1px solid red; width: 100px; height : 150px;" id = ":cnv" width = "10" height = "10"></canvas>
<script type = "text/javascript">
var cnx = document.getElementById(":cnv").getContext("2d");
cnx.fillRect(2,2,6,6); //6x6px выглядит не квадратным так как отношение width/height не совпадает с style.width/style.height
</script>
Если надо например следить за кликами на канве, то свойства width и height должны совпадать с одноименными стилевыми (например по клику нужно поставить точку в этом месте), иначе проецироваться все будет не корректно |
poorking,
на счёт разрешения просвятил-не знал . спс.-это всё объясняет. но всё равно остаётся проблема.меняю я не разрешение а её размеры-видно на фаербаге что размеры изначально есть -обращаюсь через стиль и походу получаю в разрешении... |
dmitriymar,
Странно, вроде все как обычно
<canvas style = "border: 1px solid red;" id = ":cnv"></canvas>
<script type = "text/javascript">
var cnv = document.getElementById(":cnv");
//разрешение
cnv.width = "75";
cnv.height = "25";
//размер
cnv.style.width = "150px"
cnv.style.height = "50px"
alert("res = " + cnv.width+" x "+ cnv.height +"\nstyle = " +cnv.style.width+" x " + cnv.style.height)
</script>
|
poorking,
чуть не так -при создании тега канвы задай её размеры.затем измени,просмотри через фаербаг-у меня изменение изменение идёт не размеров а разрешения-хотя должны быть размеры.хотя это может быть и баг браузера |
<canvas width = "100" height = "100"></canvas> Это не размеры а разрешение ) по умолчанию они 300x200, просто тут они идут как атрибуты, но суть та же, если задан стиль с размерами, то отображаться будет размер именно такой, какой в стиле, но если он не задан, то размер будет соответствовать разрешению в пикселах, хотя стилевые свойства будут пустые. (хотя они и так будут пустые, если их только не в коде задать) Вобщем я для себя понял так что для размеров канвы, именно размеров на страничке, приоритет имеет именно стилевое свойство w/h, но если оно не задано, то на размер влияет разрешение
<style type = "text/css">
canvas{
width: 40px;
height: 30px;
border: 1px solid red;
}
</style>
<canvas width = "1024" height = "768"></canvas>
Выглядит крохотным но на нем уместится скрин моего монитора. Может из-за этой мешанины атрибутов и свойств в браузерах какой нибудь косяк? Попробуйте в разметке не задавать их, а только в коде менять. |
Цитата:
|
monolithed,
сори, не знал о разрешении) |
| Часовой пояс GMT +3, время: 17:21. |