當使用動態尺寸時扭曲的畫布形狀

Question

我試圖根據當前視口尺寸全寬，半高度使用畫布元素創建一個斷頭臺刀片形梯形，但是每次我都這樣做時，座標似乎是不成比例的（有時我畫的形狀似乎被放大了 - 邊緣像素化，就好像我放大了x10）

我的代碼目前看起來像這樣（我使用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'); 

我覺得我的計算意義，因爲它是一個簡單的形狀，但它不是畫布在裏面裝修所有。

任何人都可以幫助我使這個形狀在動態生成的畫布元素內工作嗎？因爲我在JS中做的全部都是我只想在引用者不在當前域的情況下這樣做。

Answer 1

編輯：它看起來像你必須在jsfiddle中的canvas元素上設置display: block;以消除引起滾動條的額外間距。以下是更正後的版本：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}); 

當您創建畫布元素時效果並不好，因爲它將寬度和高度應用爲樣式屬性。使用畫布元素，CSS寬度和高度控制放大倍數，而DOM級對象寬度和高度屬性控制畫布的實際尺寸。