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

我正在尝试使用画布元素创建一个断头台刀片形状的梯形，基于当前视口尺寸（全宽、半高），但每次我这样做时，坐标似乎不成比例（有时我绘制的形状似乎被放大了-边缘被像素化，好像我放大了x10）

我的代码目前看起来像这样（我使用的是jquery1.5.x）——它是打开的

//获取页面维度：
变量页={
宽度：$（窗口）.width（），
高度：$（窗口）。高度（）
};
var halfHeight=page.height/2；
var canvas=$（''，{width:page.width，height:page.height}）；
var blade1=canvas[0]。getContext（'2d'）；
blade1.fillStyle=“#000”；
blade1.beginPath（）；
blade1.移动到（0,0）；//左上角
blade1.lineTo（页宽，0）//右上角
blade1.lineTo（页宽、半高/2）//对，向下四分之一
blade1.lineTo（0，（半高））//左边，半路
blade1.closePath（）；
blade1.fill（）；
$（canvas[0]）.css（{backgroundColor:'#fc0'}）；
$（canvas[0]）.prependTo（'body'）；

我认为我的计算是合理的，因为它是一个简单的形状，但它根本不适合在画布内

---

有人能帮我在动态生成的画布元素中创建这个形状吗？我在JS中这么做的原因是，我只想在推荐人不在当前域的情况下这样做。

编辑：看起来您必须设置

显示：块，以消除导致滚动条的额外间距。以下是更正的版本：

您可能希望钩住窗口调整大小事件，以便可以重新绘制断头台并调整画布的大小。否则，如果用户调整浏览器的大小，背景将不再适合


我不太确定JSFIDLE示例中额外的几个像素的间距是从哪里来的，但是在一个独立的页面上进行了测试，这段代码似乎达到了您想要的效果：

    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});

var canvas=$（''，{width:page.width，height:page.height}）；

创建画布元素时效果不佳，因为它将宽度和高度作为样式属性应用。对于画布元素，CSS宽度和高度控制放大率，而DOM级别的对象宽度和高度属性控制画布的实际尺寸。
编辑：看起来您必须设置
显示：块，以消除导致滚动条的额外间距。以下是更正的版本：

您可能希望钩住窗口调整大小事件，以便可以重新绘制断头台并调整画布的大小。否则，如果用户调整浏览器的大小，背景将不再适合


我不太确定JSFIDLE示例中额外的几个像素的间距是从哪里来的，但是在一个独立的页面上进行了测试，这段代码似乎达到了您想要的效果：

    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});

var canvas=$（''，{width:page.width，height:page.height}）；

创建画布元素时效果不佳，因为它将宽度和高度作为样式属性应用。对于画布元素，CSS宽度和高度控制放大率，而DOM级别的对象宽度和高度属性控制画布的实际尺寸。
这太棒了-非常感谢您的帮助和全面反馈Xenethyl！没问题！欢迎来到SO！：）这是伟大的-非常感谢您的帮助和全面的反馈Xenethyl！没问题！欢迎来到SO！：）