キャンバスの位置が正しく動作しない

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

私は、このような操作にキャンバスの高さと幅を使用します

：

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 

Answer 2

問題は、パターンがmaxWidth, maxHeightゴマと充填することによって0,0からのコンテキスト全体を埋めるということですx,yのw x hにある矩形は、そのサーフェス以外のすべてのものをマスキングするのと同じであり、パターンはそのサーフェスに対して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>