[英]How to Center Image above another image inside canvas element
我正在嘗試在 canvas 元素中的另一個圖像上方添加圖像
我想要達到的目標:
這是我得到的:
這是我的代碼:
var shirt = new Image(); shirt.src = "https://i.imgur.com/3rTZGXP.png"; var draw = new Image(); draw.src = "https://i.imgur.com/2abnbj1.png"; //draw.src = "https://i.imgur.com/TSJRGjo.png"; window.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(draw,0,0 ); ctx.drawImage(shirt,0,0,canvas.width,canvas.height); }
#canvas{ width: 352px; height: 448px; left: 0px; top: 0px; user-select: none; cursor: default; }
<canvas id="canvas" width="352" height="448"></canvas>
你可以像 ctx.drawImage(draw,100,30,90,50);
var shirt = new Image(); shirt.src = "https://i.imgur.com/3rTZGXP.png"; var draw = new Image(); draw.src = "https://i.imgur.com/2abnbj1.png"; //draw.src = "https://i.imgur.com/TSJRGjo.png"; window.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(draw,80,25,135,55 ); ctx.drawImage(shirt,0,0,canvas.width,canvas.height); }
#canvas{ width: 352px; height: 448px; left: 0px; top: 0px; user-select: none; cursor: default; }
<canvas id="canvas"></canvas>
我認為您正在尋找的是flex-box
#canvas{
display:flex;
justify-content: center;
align-content: center;
}
在這里你可以閱讀更多關於flex-box
感謝@tokage-dizayn 和https://stackoverflow.com/a/19473880/7511165
我來到這個代碼
var shirt = new Image(); shirt.src = "https://i.imgur.com/3rTZGXP.png"; var draw = new Image(); draw.src = "https://i.imgur.com/2abnbj1.png"; //draw.src = "https://i.imgur.com/TSJRGjo.png"; window.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, canvas.width, canvas.height); console.log(draw.height,draw.width); var maxSize = 160; var ratio = Math.min(maxSize / draw.width, maxSize / draw.height); var width= draw.width*ratio, height= draw.height*ratio; console.log(ratio,width,height); ctx.drawImage(draw,95,90,width,height); ctx.drawImage(shirt,0,0,canvas.width,canvas.height); }
#canvas{ width: 352px; height: 448px; left: 0px; top: 0px; user-select: none; cursor: default; }
<canvas id="canvas" width="352" height="448"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.