测试Canvas的drawImage方法

最新推荐文章于 2023-01-04 10:11:31 发布
最新推荐文章于 2023-01-04 10:11:31 发布
阅读量2.4k 收藏 3
点赞数 6
分类专栏： JavaScript 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liqianglai/article/details/53667337
版权
html代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试drawImage</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<fieldset>
  <legend>我是原图</legend>
  <img src="demo.jpg" alt="">
</fieldset>
<fieldset>
  <legend>三个参数</legend>
  <canvas id="canvas1"></canvas>
</fieldset>
<fieldset>
  <legend>五个参数，图像可能出现伸缩</legend>
  <canvas id="canvas2"></canvas>
</fieldset>
<fieldset>
  <legend>九个参数，裁剪图像</legend>
  <canvas id="canvas3"></canvas>
</fieldset>
<script src="index.js"></script>
</body>
</html>
js代码
var canvas1 = document.getElementById('canvas1'),
  canvas2 = document.getElementById('canvas2'),
  canvas3 = document.getElementById('canvas3'),
  ctx1 = canvas1.getContext('2d'),
  ctx2 = canvas2.getContext('2d'),
  ctx3 = canvas3.getContext('2d');
canvas1.width = 391;
canvas1.height = 220;
canvas2.width = 391;
canvas2.height = 220;
canvas3.width = 391;
canvas3.height = 220;

var img = new Image();
img.src = 'demo.jpg';

ctx1.drawImage(img, 0, 0);
ctx2.drawImage(img, 0, 0, 100, 100);
ctx3.drawImage(img, 225, 35, 100, 100, 225, 35, 100, 100);
结果

这里写图片描述

来小新
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas drawImage初次加载以及加载完成后事件
cuiyaoqiang的博客
10-26 1万+
直接调用canvas的 drawImage()方法首次加载时图片不显示，解决方案是在Img.onload（）方法中绘制图。但是如果以后需要不断的绘制该图片的时候就会一直调用onload事件，出现图片一闪一闪的现象，解决方案是根据Img.complete（）方法判断图片是否加载完成。如下： var devBgImg = new Image(); devBgImg.src =th
canvas的drawImage方法参数详解
热门推荐
编程界明世隐的博客
03-12 3万+
引言： canvas很有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。 一旦获得了源图对象，我们就可以使用drawImage方法将它渲染到 canvas 里。 drawImage方法有三种形态： drawImage(image, dx, dy) 在画布指定位置绘制原图 drawImage(i...
canvas的drawImage的参数
longtengg1的博客
10-03 8538
drawImage() 方法用于在canvas画布上绘制图像、画布或视频。 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 参数 描述 img 规定要使用的图像、画布或视频。 sx 可选。开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sheight 可选。被剪切图像的高度。 x 在画布上放置图像的 x 坐标位置。 y 在画布上放置图
java中 Graphics2D 的 drawImage()方法参数详细解释
Architect_CSDN的博客
08-09 1万+
方便自己理解 public abstract boolean drawImage(Image img, int x, int y, int width, int height, ImageObserver observer)绘制指定图像中已缩放到适合指定矩形内部的图像。 图像绘制在此图形上下文坐标空间的指定矩形内部，并且如果需要，则进行缩放。透明像素不影响该处已存在的像素。 此方法在任何情况下都...
drawImage 详解
艾利克斯冰的博客
01-04 2772
drawImage 详解
小程序中canvas测试心得
03-29
最后，wx.canvasToTempFilePath是将canvas内容转换为临时文件路径的方法，其参数需要包含canvasID、success回调、fail回调和complete回调。成功后，可以通过wx.saveFile将临时文件保存至本地。 综上所述，微信小...
canvas画图测试
04-13
5. **图像处理**：Canvas可以加载和绘制图片，`drawImage()`方法接受一个Image对象、源坐标和目标坐标作为参数。此外，还可以通过`createPattern()`或`createLinearGradient()`创建图案和渐变，应用到图形的填充或...
使用canvas压缩图片上传的方法示例
11-21
在前端开发中，有时我们需要对用户上传的图片进行压缩处理，以减少服务器存储空间和网络传输的负担。本文将详细讲解如何使用HTML5的...此外，不同浏览器对canvas的处理可能存在差异，实际使用时需要做好兼容性测试。
小程序canvasDemo
10-21
微信小程序的canvas API与HTML5 canvas API相似，提供了`drawImage`、`fillText`、`strokeRect`等方法来绘制图形和文本。例如，`drawImage`用于绘制图片，`fillText`用于在画布上写入文本，`strokeRect`则可以画出...
飞机大战canvas.zip
06-07
在"飞机大战"中，开发者可能使用了Canvas的drawImage方法来绘制飞机和子弹，利用clearRect方法清空画布以实现动画效果，以及fillRect或strokeRect来绘制游戏边界和其他游戏元素。此外，可能还使用了beginPath、move...
小程序中canvas的drawImage方法参数使用详解
10-16
主要介绍了小程序中canvas的drawImage方法参数使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML5之drawImage函数
EmotionComputer
04-18 1万+
可用函数 drawImage(image, x, y) //按原图片大小绘制。 drawImage(image, x, y, width, height) //按指定大小绘制。 drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) //常
canvas drawImage() 方法绘制图片与视频
蚩尤后裔-汪茂雄
11-14 1万+
目录 canvas drawImage() 方法 编码示例 context.drawImage(img,x,y) context.drawImage(img,x,y,width,height) context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 获取画布以及 Image 尺寸 画布上叠加绘制 画布上实时渲染动画 ...
java中方法drawImage()的参数详细解释
weixin_42074152的博客
07-12 1万+
方便自己理解public abstract boolean drawImage(Image img,int x,int y,int width,int height,ImageObserver observer)绘制指定图像中已缩放到适合指定矩形内部的图像。图像绘制在此图形上下文坐标空间的指定矩形内部，并且如果需要，则进行缩放。透明像素不影响该处已存在的像素。此方法在任何情况下都立刻返回，甚至在整...
Canvas 绘制图片(drawImage())
houyanhua1的专栏
04-14 1936
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; canv
canvas之drawImage
liuzijiang1123的专栏
08-11 2604
今天在掘金上看到了别人用js手动写的flappy bird H5游戏，觉得很有意思，自己也想好好玩一下，好好学习一下canvas和锻炼一下自己的思维；  先学习一下drawImage这个API；  先贴一下网上别人的介绍，个人觉得很实用，也很好入门； 要在绘图上下文中绘制图片，可以使用 drawImage 方法。该方法有三种不同 的参数:  drawImage(image,
canvas drawImage() 方法
qq_36893984的博客
12-09 1079
canvas操作
html5 drawimage 不显示,canvas的drawImage无法显示图像
最新发布
06-07
可能是由于以下原因导致 `drawImage` 方法无法显示图像： 1. 图片路径错误：确保图片路径是正确的，可以通过在浏览器中打开图片来测试路径是否正确。 2. 图片加载错误：如果图片没有正确加载，那么 `drawImage` 方法将无法显示图像。在加载图片之前，可以在控制台中打印出图片对象，确认图片是否加载成功。 3. Canvas 尺寸错误：如果 Canvas 的尺寸设置不正确，那么 `drawImage` 方法将无法在 Canvas 上正确显示图像。 4. 图片格式错误：如果图片格式不被支持，那么 `drawImage` 方法将无法正确显示图像。确保你使用的是被 Canvas 支持的图片格式，如 JPEG、PNG 或 GIF。 5. 图片加载顺序错误：如果在图片加载完成之前就调用 `drawImage` 方法，那么图像将无法正确显示。需要等到图片加载完成后再调用 `drawImage` 方法。 希望以上解决方案能够帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值