HTML5如何在Canvas中调用图像

韦巴·达斯

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

您可以drawImageW3CSchool的文章中阅读有关功能的更多信息

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

HTML5如何在Canvas中调用图像

来自分类Dev

如何在html5 canvas中使用gif图像?

来自分类Dev

HTML5 Canvas-如何在画布上的图像上绘制矩形

来自分类Dev

如何在 HTML5 上放置新图像之前清除 Canvas?

来自分类Dev

裁剪HTML5 Canvas / JavaScript后,如何从图像中删除透明空白?

来自分类Dev

HTML5 Canvas中的图像单击事件

来自分类Dev

HTML5中对canvas.putImageData的多次调用

来自分类Dev

如何在html5 canvas中绘制Fabric js strokeRect?

来自分类Dev

如何在javascript中获取HTML5 Canvas.todataurl文件大小?

来自分类Dev

如何在 HTML5 Canvas 中拥有多个颜色元素?

来自分类Dev

如何在canvas-html5中绘制图像并替换为现有函数

来自分类Dev

如何从XMLHttpRequest响应中设置HTML5 canvas ImageData?

来自分类Dev

如何使对象围绕html5 canvas中的点

来自分类Dev

如何清除Canvas中的特定行:HTML5

来自分类Dev

如何使用JavaScript在HTML5 Canvas中绘制圆?

来自分类Dev

如何使对象围绕html5 canvas中的点

来自分类Dev

如何在HTML5中为运动图像留出距离

来自分类Dev

在保留图像的同时在HTML5 Canvas中绘制图像

来自分类Dev

如何清除canvas html5?

来自分类Dev

如何清除canvas html5?

来自分类Dev

HTML5 Canvas中的计时

来自分类Dev

html5 canvas中的旋转逻辑

来自分类Dev

在 HTML5 Canvas 中旋转对象

来自分类Dev

如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

来自分类Dev

如何使用HTML5 canvas获得base64格式的正确图像数据

来自分类Dev

如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

来自分类Dev

使Html5 Canvas及其包含的图像在浏览器中响应

来自分类Dev

html5 canvas应用程序中的JavaScript base64图像源内存管理

来自分类Dev

使用箭头键移动html5 canvas时在gameloop中旋转图像

Related 相关文章

  1. 1

    HTML5如何在Canvas中调用图像

  2. 2

    如何在html5 canvas中使用gif图像?

  3. 3

    HTML5 Canvas-如何在画布上的图像上绘制矩形

  4. 4

    如何在 HTML5 上放置新图像之前清除 Canvas?

  5. 5

    裁剪HTML5 Canvas / JavaScript后,如何从图像中删除透明空白?

  6. 6

    HTML5 Canvas中的图像单击事件

  7. 7

    HTML5中对canvas.putImageData的多次调用

  8. 8

    如何在html5 canvas中绘制Fabric js strokeRect?

  9. 9

    如何在javascript中获取HTML5 Canvas.todataurl文件大小?

  10. 10

    如何在 HTML5 Canvas 中拥有多个颜色元素?

  11. 11

    如何在canvas-html5中绘制图像并替换为现有函数

  12. 12

    如何从XMLHttpRequest响应中设置HTML5 canvas ImageData?

  13. 13

    如何使对象围绕html5 canvas中的点

  14. 14

    如何清除Canvas中的特定行:HTML5

  15. 15

    如何使用JavaScript在HTML5 Canvas中绘制圆?

  16. 16

    如何使对象围绕html5 canvas中的点

  17. 17

    如何在HTML5中为运动图像留出距离

  18. 18

    在保留图像的同时在HTML5 Canvas中绘制图像

  19. 19

    如何清除canvas html5?

  20. 20

    如何清除canvas html5?

  21. 21

    HTML5 Canvas中的计时

  22. 22

    html5 canvas中的旋转逻辑

  23. 23

    在 HTML5 Canvas 中旋转对象

  24. 24

    如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

  25. 25

    如何使用HTML5 canvas获得base64格式的正确图像数据

  26. 26

    如何将图像从url沿着侧面输入类型文件加载到html5 canvas?

  27. 27

    使Html5 Canvas及其包含的图像在浏览器中响应

  28. 28

    html5 canvas应用程序中的JavaScript base64图像源内存管理

  29. 29

    使用箭头键移动html5 canvas时在gameloop中旋转图像

热门标签

归档