我现在已经设计了一个画布,我想在该画布中调用图像。我已经看完了教程,但是我不知道如何实现。我的图片分辨率很高,但是我想使用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吗?
谢谢
如果还要调整图像大小,则需要使用以下语法。
context.drawImage(img,x-Position,y-Position,width,height);
这里以更新的JSFiddle为例。
您可以drawImage
在W3CSchool的文章中阅读有关功能的更多信息。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句