Question

我正在尝试使用canvas元素创建一个guillotine-blade形状的梯形，基于当前视口尺寸全宽，半高），但每次我这样做时坐标似乎都是不成比例的（有时候我绘制的形状似乎放大了 - 边缘像素化，好像我放大了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');

我认为我的计算很有意义，因为它是一个简单的形状，但它根本不适合画布。

任何人都可以帮助我在动态生成的canvas元素中使这个形状工作吗？我之所以在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});

创建canvas元素时效果不佳，因为它将width和height应用为样式属性。使用canvas元素时，CSS宽度和高度控制放大率，而DOM级对象宽度和高度属性控制画布的实际尺寸。

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

1 个答案: