Искаженная форма холста при использовании динамических размеров - PullRequest
Новая
       4

Искаженная форма холста при использовании динамических размеров

1 голос
/ 02 октября 2011

Я пытаюсь создать трапецию в форме гильотинного лезвия, используя элемент canvas, основываясь на текущих размерах окна просмотра: полная ширина, половина высоты), но каждый раз, когда я делаю это, координаты кажутся непропорциональными (а иногда фигура, которую я рисую, кажется увеличенной - края пикселированы, как будто я увеличил х10)

Мой код в настоящее время выглядит следующим образом (я использую jquery 1.5.x) - он находится на jsfiddle 

//Get the page dimensions:
var page = {
    width:$(window).width(),
    height:$(window).height()
};
var halfHeight = page.height/2;
var canvas = $('<canvas />', {width:page.width, height:page.height});
var blade1 = canvas[0].getContext('2d');
blade1.fillStyle = "#000";
blade1.beginPath();
blade1.moveTo(0,0); // topleft
blade1.lineTo(page.width, 0); //topright
blade1.lineTo(page.width,halfHeight/2); //right, quarterway down
blade1.lineTo(0,(halfHeight)); //left, halfway down
blade1.closePath();
blade1.fill();
$(canvas[0]).css({backgroundColor:'#fc0'});
$(canvas[0]).prependTo('body');

Я думаю, что мои расчеты имеют смысл, так как это простая форма, но она совсем не вписывается в холст.

Может кто-нибудь помочь мне заставить эту форму работать внутри динамически генерируемого элемента canvas? Причина, по которой я делаю все это в JS, заключается в том, что я хочу делать это только в том случае, если реферер находится за пределами текущего домена.

1 Ответ

1 голос
/ 02 октября 2011

Редактировать: Похоже, вы должны установить display: block; для элемента canvas в jsfiddle, чтобы устранить дополнительный интервал, который вызывает полосы прокрутки. Вот исправленная версия: http://jsfiddle.net/LAuUh/3/

Возможно, вы захотите подключиться к событию изменения размера окна, чтобы вы могли заново нарисовать гильотину и изменить размер холста. В противном случае, если пользователь изменит размер своего браузера, фон больше не будет соответствовать.

Я не совсем уверен, откуда берутся лишние пиксели в примере jsfiddle, но при тестировании на отдельной странице этот код, кажется, достигает того, что вы ищете: 

    var vpW = $(window).width();
    var vpH = $(window).height();
    var halfHeight = vpH/2;
    var canvas = document.createElement("canvas");
    canvas.width = vpW; canvas.height = vpH;
    var blade1 = canvas.getContext('2d');
    blade1.fillStyle = "#000";
    blade1.beginPath();
    blade1.moveTo(0,0); // top left
    blade1.lineTo(vpW, 0); // top right
    blade1.lineTo(vpW,halfHeight / 2.0); // right, quarterway down
    blade1.lineTo(0,halfHeight + halfHeight / 2.0); // left, threequarters down
    blade1.closePath();
    blade1.fill();

    $(canvas).css('backgroundColor','#fc0');
    $(canvas).prependTo('body');

С этим CSS: 

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

Основной проблемой, которую я исправил, были координаты, которые вы использовали для своей формы гильотины. Кроме того, используя этот синтаксис: 

var canvas = $('<canvas />', {width:page.width, height:page.height});

когда вы создаете свой элемент canvas, это плохо, так как он применяет ширину и высоту в качестве атрибутов стиля. При использовании элементов canvas ширина и высота CSS управляют увеличением, а атрибуты width и height объекта DOM контролируют фактические размеры холста.

...