Question

我想在画布上添加一个图像。画布的宽度和高度是400X400。图像的大小是298x300。我希望它在画布上绘制时的大小为30x30。所以我在脚本标签内给出了它的宽度和高度。但它并没有影响图像的原始大小。它覆盖了整个画布（甚至只显示了它的一半）。我可以解决这个问题吗？

![<html>
<head>
<style>
#mycanvas{
width:400;
height:400;
border:1px solid black;
}
</style>
</head>
<body>
<script>
function draw(){
  var canvas=document.getElementById("mycanvas");
  var ctx=canvas.getContext('2d');
  var img=new Image();
  img.src="lol1.jpg";
  img.style.width="30px";
  img.style.height="30px";
  ctx.drawImage(img,0,0);
}

window.onload=draw;
</script>
<canvas id="mycanvas"></canvas>
</body>
</html>]

enter image description here

Answer 1

只需使用：

ctx.drawImage(img,0,0,30,30);

第4个参数是宽度，第5个是高度。

最小化画布中的图像大小

1 个答案: