HTML5如何在Canvas中调用图像

HTML5 How to call image in Canvas

本文关键字：调用 图像 Canvas HTML5      更新时间：2023-09-26

我已经设计了一个画布，现在我想在画布中调用图像。我已经完成了教程，但我不知道如何实现它。我的图像是高分辨率的，但我想用javascript减少图像大小和分辨率。谁都可以帮我。

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(8,200);
ctx.lineTo(8,308);
ctx.moveTo(259,76);
ctx.lineTo(259,308);
ctx.moveTo(259,308);
ctx.lineTo(8,308);
ctx.moveTo(8,200);
ctx.lineTo(259,76);
ctx.stroke();
var imageObj = new Image();
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 69, 50);
  };
  imageObj.src = 'img/logo.jpg', height='42', width='42';
</script>

我不能调用image。有人能帮我把javascript转换成jquery吗?

谢谢

如果您也想调整图像的大小，则需要使用以下语法。

context.drawImage(img,x-Position,y-Position,width,height);

下面是一个更新的JSFiddle作为示例。

您可以在W3CSchool的文章中阅读更多关于drawImage函数的内容。

相关文章：