HTML5 如何在 Canvas 中调用图像答案

【问题标题】：HTML5 How to call image in CanvasHTML5 如何在 Canvas 中调用图像
【发布时间】：2014-08-09 13:30:37
【问题描述】：

我已经设计了一个画布，现在我想在该画布中调用一个图像。我已经阅读了教程，但我不知道如何实现。我的图像是高分辨率的，但我想使用 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>

我无法调用图像。任何人都将帮助我如何在 jquery 中转换这个 javascript？

谢谢

【问题讨论】：

“通话图片”是什么意思？
How to add image to canvas 的可能重复项
@Amadan 我只想在画布中显示图像。像一个相框
在这种情况下，+1 到@Mr.Alien。
@Mr.Alien 是的，同样的问题。但你能帮我在我的问题中以相同的画布形状显示图像吗？

标签： javascript html canvas

【解决方案1】：

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

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

这里以更新的JSFiddle 为例。

您可以在此W3CSchool's article 中阅读有关drawImage 函数的更多信息。

【讨论】：

嗨 Shiva，你已经解决了我的问题，但现在的问题是我无法将画布用作相框我更改了这一行“ctx.drawImage(imageObj,100,160,100, 100);"到 "ctx.drawImage(imageObj,9, 58, 250, 250);"现在如何从画布边框中删除图像的外部部分？你会帮我吗？
@VaibhavDass：vaibhav 请参考这篇文章，这可能是你想要达到的目标。 stackoverflow.com/questions/18988118/… 在里面确实看到了“GameAlchemist”的答案中的 Jsfiddle
谢谢@Shiva 它对我有帮助。我的问题解决了:-)