Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

顶部和左侧图案正常工作，但右侧和底部图案无法正确显示。

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

Answer 1

问题是该模式将填充0,0直到maxWidth, maxHeight的整个上下文，并填充x,y w x h处的矩形就像掩盖其他所有内容表面和图案不是从相对于该表面的0,0开始的。

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

＆＃13;

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    



}

＆＃13;

<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>

＆＃13;

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

画布定位无法正常工作

2 个答案: