javascript - Canvas 定位无法正常工作

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并通过填充 x,y 处的矩形的w x h就像掩盖除该表面之外的所有其他内容，并且图案不是从 0,0 开始的相对于该表面。

因此您需要更改 bottom 的 Canvas 上下文的起源和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>