[英]how to fill rotated canvas rectangles with image
我的畫布有 4 個矩形，我想用圖像填充每個矩形，例如 i1.png 畫布已旋轉並具有比例，當我旋轉圖像時，它們不在它們的位置上。 我該如何解決？
代碼 ：
<html> <head> <script src="jquery-3.4.1.js"></script> </head> <body bgcolor="black"> <canvas id="tutorial" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("tutorial"), ctx = canvas.getContext("2d"), rects = [ {x: 0, y: 0, w: 100, h: 100}, {x: 0, y: 100, w: 100, h: 100}, {x: 100, y: 100, w: 100, h: 100}, {x: 100, y: 0, w: 100, h: 100} ], i = 0, r; ctx.translate(500, 500); ctx.scale(0.71, 0.3834); ctx.rotate(-0.25 * Math.PI); canvas.onmousemove = function(e) { var rect = this.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top, i = 0, r; ctx.clearRect(0, 0, canvas.width, canvas.height); while (r = rects[i++]) { ctx.beginPath(); ctx.rect(rx, ry, rw, rh); ctx.fillStyle = "#c5de89"; ctx.fill(); if(ctx.isPointInPath(x, y)) { ctx.strokeStyle = "white"; ctx.lineWidth = 5; ctx.strokeRect(rx + 5, ry + 5, rw - 10, rh - 10); ctx.save(); base_image = new Image(); base_image.src = 'https://i.stack.imgur.com/D3HBL.png'; ctx.rotate(0.25 * Math.PI); //console.log(base_image.width); ctx.drawImage(base_image, 0, 0, base_image.width, base_image.height , rx , ry , rw , rh); ctx.restore() } else { ctx.fillStyle = "#c5de89"; } ctx.save(); ctx.restore() } }; </script> </body> </html>我的代碼結果：
我想像這樣填充我的矩形：
這是我們用於此示例的 i1.png：
更多細節（編輯）：
我正在嘗試創建一個游戲地圖，實際上他們創建了一個畫布並旋轉了它。 我想在沒有任何旋轉的情況下將我的圖像附加到每個矩形。 我認為形狀無關緊要，我只想為每個矩形設置一個圖像而不旋轉，當我這樣做時，它們不再在原位！ 看第二張照片，我想創造這樣的東西。 我希望這張圖片能說明目的，我們將每個地圖塊 i.stack.imgur.com/kFN6G.jpg 分開，不要考慮我的代碼，認為我們想在我們的形狀上附加一個圖像層！
曾嘗試使用方形照片實現相同的效果
說明：畫布綠色菱形原本是方形的，照片也是方形的（保持相同的縱橫比等）。 因此，square auto 上的所有幾何操作都適用於照片，並且無需對圖像進行任何操作即可快速獲得所需的結果
<html> <head> <script src="jquery-3.4.1.js"></script> </head> <body bgcolor="black"> <canvas id="tutorial" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("tutorial"), ctx = canvas.getContext("2d"), rects = [ {x: 0, y: 0, w: 100, h: 100}, {x: 0, y: 100, w: 100, h: 100}, {x: 100, y: 100, w: 100, h: 100}, {x: 100, y: 0, w: 100, h: 100} ], i = 0, r; ctx.translate(canvas.width / 2, canvas.height / 2); ctx.scale(0.71, 0.3834); ctx.rotate(-0.25 * Math.PI); canvas.onmousemove = function(e) { var rect = this.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top, i = 0, r; ctx.clearRect(0, 0, canvas.width, canvas.height); while (r = rects[i++]) { ctx.beginPath(); ctx.rect(rx, ry, rw, rh); ctx.fillStyle = ctx.isPointInPath(x, y) ? "red" : "#c5de89"; ctx.fill(); ctx.save(); base_image = new Image(); base_image.src = 'https://i.stack.imgur.com/d6VAh.png'; //ctx.rotate(0.25 * Math.PI); ctx.drawImage(base_image, rx, ry, rw , rh); ctx.restore() } }; </script> </body> </html>讓我知道它是否有幫助
fengyuanchen Cropper - 旋轉后如何將圖像調整到畫布中？
[英]fengyuanchen Cropper - How to Fit Image into Canvas If Rotated?
在 HTML5 canvas 中繪制一系列矩形以完全填充 canvas
[英]Drawing a series of rectangles in HTML5 canvas to completely fill the canvas
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.