当使用动态尺寸时扭曲的画布形状

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级对象宽度和高度属性控制画布的实际尺寸。