画布定位无法正常工作

Question

我一直在尝试使用HTML canvas绘制框架。 这是我的代码：在这里，500px将是我的图像的高度-宽度。 所以，我正在尝试在图像周围画一个框架...

 function myCanvas() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var top = document.getElementById("top"); var bottom = document.getElementById("bottom"); var left = document.getElementById("left"); var right = document.getElementById("right"); // ctx.drawImage(img,0,0); var ptrn = ctx.createPattern(left, 'repeat'); var topPtrn = ctx.createPattern(top, 'repeat'); var bottomPtrn = ctx.createPattern(bottom, 'repeat'); var rightPtrn = ctx.createPattern(right, 'repeat'); ctx.fillStyle = ptrn; // left ctx.fillRect(0, top.clientHeight, left.clientWidth, 500); // left ctx.fillStyle = topPtrn; // top ctx.fillRect(left.clientWidth, 0, 500, top.clientHeight); // top ctx.fillStyle = bottomPtrn; // bottom ctx.fillRect(left.clientWidth, 500 + top.clientHeight, 500, bottom.clientHeight); // botttom //ctx.save(); //ctx.rotate(Math.PI/2); //ctx.restore(); ctx.fillStyle = rightPtrn; ctx.fillRect(500 + left.clientWidth, top.clientHeight, right.clientWidth, 500); // right // ctx.rotate(180*Math.PI/180); } 

 <p>Image to use:</p> <img id="top" src="https://i.imgur.com/jbOpU7Y.png" alt="The Scream" > <img id="bottom" src="https://i.imgur.com/ftckhxk.png" alt="The Scream" > <img id="left" src="https://i.imgur.com/PNahWhN.png" alt="The Scream" > <img id="right" src="https://i.imgur.com/7lWBQcp.png" alt="The Scream"> <p>Canvas to fill:</p> <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <p><button onclick="myCanvas()">Try it</button></p> 

顶部和左侧样式正常工作，但右侧和底部样式未正确显示。

更新：我的目标是定位4张图像，使其看起来像一个框架。 左图和顶图定位良好。 但是右图和底图的位置正确，但显示不正确。 在代码段上运行它以了解我的意思

Answer 1

问题在于，图案将从0,0直到maxWidth, maxHeight填充整个上下文maxWidth, maxHeight并且通过填充wxh x,y处的矩形就像掩盖其他所有东西，但是该表面和图案并非从0,0开始相对于该表面。

因此，您需要为bottom和right边框更改画布上下文的原点。

 function myCanvas() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var top = document.getElementById("top"); var bottom = document.getElementById("bottom"); var left = document.getElementById("left"); var right = document.getElementById("right"); // ctx.drawImage(img,0,0); var ptrn = ctx.createPattern(left, 'repeat'); var topPtrn = ctx.createPattern(top, 'repeat'); var bottomPtrn = ctx.createPattern(bottom, 'repeat'); var rightPtrn = ctx.createPattern(right, 'repeat'); ctx.fillStyle = ptrn; // left ctx.fillRect(0, top.clientHeight, left.clientWidth, 500); // left ctx.fillStyle = topPtrn; // top ctx.fillRect(left.clientWidth, 0, 500, top.clientHeight); // top ctx.transform(1, 0, 0, 1, left.clientWidth, 500 + top.clientHeight); ctx.fillStyle = bottomPtrn; // bottom ctx.fillRect(0, 0, 500, bottom.clientHeight); // botttom ctx.transform(1, 0, 0, 1, -left.clientWidth, -500 - top.clientHeight); ctx.transform(1, 0, 0, 1, left.clientWidth + 500, top.clientHeight); ctx.fillStyle = rightPtrn; ctx.fillRect(0, 0, right.clientWidth, 500); // right } 

 <p>Image to use:</p> <img id="top" src="https://i.imgur.com/jbOpU7Y.png" alt="The Scream"> <img id="bottom" src="https://i.imgur.com/ftckhxk.png" alt="The Scream"> <img id="left" src="https://i.imgur.com/PNahWhN.png" alt="The Scream"> <img id="right" src="https://i.imgur.com/7lWBQcp.png" alt="The Scream"> <p>Canvas to fill:</p> <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <p><button onclick="myCanvas()">Try it</button></p> 

Answer 2

我将使用画布的高度和宽度进行此类操作：

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