Javascript 画布定位不正确

我一直在尝试使用HTML画布绘制框架。这是我的密码： 这里，500px将是我的图像高度和宽度。所以，我试着在图像周围画一个框架

函数myCanvas{ var c=document.getElementByIdmyCanvas； var ctx=c.getContext2d； var top=document.getElementByIdtop； var bottom=document.getElementByIdbottom； var left=document.getElementByIdleft； var right=document.getElementByIdright； //ctx.drawImageimg，0,0； var ptrn=ctx.createPatternleft，“重复”； var topttrn=ctx.createPatterntop，“重复”； var bottomPtrn=ctx.createPatternbottom，“重复”； var rightprn=ctx.createPatternright，“重复”； ctx.fillStyle=ptrn；//左 ctx.fillRect0，top.clientHeight，left.clientWidth，500；//left ctx.fillStyle=topttrn；//top ctx.fillRectleft.clientWidth，0500，top.clientHeight；//top ctx.fillStyle=bottomPtrn；//bottom ctx.fillRectleft.clientWidth，500+top.clientHight，500，bottom.clientHight；//bottom //ctx.save； //ctx.rotateMath.PI/2； //ctx.restore； ctx.fillStyle=rightprn； ctx.fillRect500+left.clientWidth，top.clientHeight，right.clientWidth，500；//right //ctx.rotate180*Math.PI/180； } 要使用的图像：

要填充的画布：

您的浏览器不支持HTML5画布标记。

---

试试看

我会使用画布的高度和宽度来执行以下操作：

ctx.fillRect(0, top.clientHeight, left.clientWidth, c.height-(2*top.clientHeight)); // left
ctx.fillRect(left.clientWidth, 0, c.width-(2*top.clientWidth), top.clientHeight); // top
ctx.fillRect(left.clientWidth, c.height-top.clientHeight, c.width-(2*bottom.clientWidth), bottom.clientHeight); // botttom
ctx.fillRect(c.width-right.clientWidth, top.clientHeight, right.clientWidth, c.height-(2*top.clientHeight)); // right   

---

问题是模式将从0,0填充整个上下文，直到maxWidth，maxHeight，并且通过在x，y的w x h处填充矩形，就像掩盖除该曲面之外的所有内容，并且模式不会从相对于该曲面的0,0开始

因此，您需要为底部和右侧边框更改画布上下文的原点

函数myCanvas{ var c=document.getElementByIdmyCanvas； var ctx=c.getContext2d； var top=document.getElementByIdtop； var bottom=document.getElementByIdbottom； var left=document.getElementByIdleft； var right=document.getElementByIdright； //ctx.drawImageimg，0,0； var ptrn=ctx.createPatternleft，“重复”； var topttrn=ctx.createPatterntop，“重复”； var bottomPtrn=ctx.createPatternbottom，“重复”； var rightprn=ctx.createPatternright，“重复”； ctx.fillStyle=ptrn；//左 ctx.fillRect0，top.clientHeight，left.clientWidth，500；//left ctx.fillStyle=topttrn；//top ctx.fillRectleft.clientWidth，0500，top.clientHeight；//top ctx.transform1,0,0,1，left.clientWidth，500+top.clientHeight； ctx.fillStyle=bottomPtrn；//bottom ctx.fillRect0,0500，bottom.clientHeight；//bottom ctx.transform1,0,0,1，-left.clientWidth，-500-top.clientHeight； ctx.transform1,0,0,1，left.clientWidth+500，top.clientHeight； ctx.fillStyle=rightprn； ctx.fillRect0，0，right.clientWidth，500；//右 } 要使用的图像：

要填充的画布：

您的浏览器不支持HTML5画布标记。

---

试试看

不工作和显示不正确不是技术术语。定义两者的含义。@Ahsan Aasim检查我的回答好的，我成功地在图像周围画出了框架。但对于图案，图像高度不起作用。图像在fillrect高度下被剪切。你能检查一下我的另一个问题吗@这个答案对你有帮助吗？是的，很有帮助，但ENK1的答案很好。我设法在图像周围绘制图像，但我的图像显示不正确。你可以看到我的另一个问题好的，我成功地画了图像周围的框架。但对于图案，图像高度不起作用。图像在fillrect高度下被剪切。你能检查一下我的另一个问题吗？请注意，您有不同大小的图像。我按了这是草稿，在您的实际解决方案中，您希望有相同大小的图像。如果使用相同的大小，就有了解决方案。如果我的解决方案现在适合您，请检查它作为正确答案，然后我将检查您的其他问题。好的，因为问题是关于定位的，所以上面的代码工作得很好。但是我需要调整图像的大小，使其适合绘制的矩形。请检查我的问题。