[英]How to Center Image above another image inside canvas element
I'm trying to add Images above another image in the canvas element我正在尝试在 canvas 元素中的另一个图像上方添加图像
What I'm trying to reach:我想要达到的目标:
Here is what I get:这是我得到的:
images source: https://imgur.com/gallery/jaSdhQ9
图片来源: https://imgur.com/gallery/jaSdhQ9
and this my code:这是我的代码:
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>
you can set this like ctx.drawImage(draw,100,30,90,50 );你可以像 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>
thanks to @tokage-dizayn and https://stackoverflow.com/a/19473880/7511165感谢@tokage-dizayn 和https://stackoverflow.com/a/19473880/7511165
I came to this code我来到这个代码
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.