Canvas drawImage
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。
这个方法有三张传参模式,3个参数,5个参数,9个参数
3个参数
被画的图片不进行裁切和压缩,原大小绘制到canvas上。
context.drawImage(img,x,y);
x, y 表示绘制到canvas上的起始位置。
<style>canvas{border:1px solid #d3d3d3;background:#ffffff;}
</style>
<img id="image" src="https://img.alicdn.com/tfs/TB1vIhSQXXXXXXFaXXXXXXXXXXX-1376-1366.png_200x200.jpg"/>
<canvas id="canvas" width="300" height="300" style=""></canvas>
<script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var img = document.getElementById("image");// 在canvas 10x10 的坐标绘制原大小的图片ctx.drawImage(img, 10, 10);
</script>
5个参数
在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
x, y 表示绘制到canvas上的起始位置。width, height 表示画到canvas上图片的大小
<style>img{vertical-align: top;}canvas{border:1px solid #d3d3d3;background:#ffffff;}
</style>
<img id="image" src="https://img.alicdn.com/tfs/TB1vIhSQXXXXXXFaXXXXXXXXXXX-1376-1366.png_200x200.jpg"/>
<canvas id="canvas" width="300" height="300" style=""></canvas>
<script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var img = document.getElementById("image");// 将原图在canvas 坐标为 10x10 的位置开始绘制,并且将图片绘制为 100x100 的大小ctx.drawImage(img, 10, 10, 100, 100);
</script>
9个参数
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
sx,sy 裁切的开始位置(基于原图)
swidth,sheight 裁切的宽高(基于原图)
x, y 表示绘制到canvas上的起始位置。
width, height 表示画到canvas上图片的大小。
<style>img{vertical-align: top;}canvas{border:1px solid #d3d3d3;background:#ffffff;}
</style>
<img id="image" src="https://img.alicdn.com/tfs/TB1vIhSQXXXXXXFaXXXXXXXXXXX-1376-1366.png_200x200.jpg"/>
<canvas id="canvas" width="300" height="300" style=""></canvas>
<script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var img = document.getElementById("image");// 从原图 100x100 坐标开始截取宽度为 100x100 图像// 并在canvas 10x10 的坐标开始绘制为 200x200 尺寸的图片ctx.drawImage(img, 100, 100, 100, 100, 10, 10, 200, 200);
</script>
转载于:https://www.cnblogs.com/xiaoniuzai/p/7100197.html
Canvas drawImage相关推荐
- canvas drawImage方法不显示图片的解决方案
canvas drawImage方法不显示图片的解决方案 参考文章: (1)canvas drawImage方法不显示图片的解决方案 (2)https://www.cnblogs.com/undefi ...
- 如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿
Html5 canvas drawImage图片抗锯齿2018-01-26 11:17 虽然drawImage会自动应用消除锯齿,但如果是从大尺寸变为小尺寸,某些图像就不尽人意了,比如曲线. 对于可能 ...
- CANVAS drawImage 绘图图片模糊已解决
CANVAS drawImage 绘图图片模糊解决 不可以在CSS中定死canvas画布的长宽, 在绘图时给出canvas宽高 具体JS代码: const canvas = document.getE ...
- html5 canvas 图片拼接,HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
代码如下: Document *{margin:0 auto;} .box{border: 1px solid #ccc;width:1205px;height:400px;margin:0 auto ...
- 微信小程序 Canvas drawImage()绘图头像二维码 安卓用户显示半透明!
微信小程序 Canvas drawImage() 图片在安卓显示为半透明 我遇到的是drawImage()方法绘制 头像和二维码 时开发工具测试没问题 真机测试则出现以下样式 具体问题不太清楚,有可能 ...
- android canvas 保存图片,ionic3 html5 video 抓图保存到手机相册,解决Android手机不支持Canvas drawImage问题...
当然百度出上W条答案 上代码,相信下面代码和小伙伴大同吧 相信好多做webview app的小伙伴们都有同样的问题,在pc上能轻松实现video 抓图.但是在android手机大多是不支持canvas ...
- HTML5 canvas drawImage() 方法记录
浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 drawImage() 方法. 注释:Internet Explorer 8 或 ...
- html5 drawimage 不显示,javascript – 来自视频的HTML5 Canvas drawImage在第一次绘制时不显示...
我有一个带有画布覆盖的视频元素.然后我有一个绘图工具设置来绘制视频和一个保存按钮,从视频和画布执行draw Image以保存一个压缩帧.但是,我第一次按Save我只从画布drawImage获得结果,视 ...
- canvas - drawImage()方法绘制图片不显示的问题
canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等. 问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3 ...
最新文章
- 第十五周程序阅读-范型程序设计(6)
- VMware Workstation PRO 15 (已永久性激活)
- linux 下面编译FFMPEG
- java 模板引擎_Spring Boot 如何快熟整合Thymeleaf模板引擎
- proxomitron 个人代理工具
- php 权限规范,项目人员权限验证
- 每天进步一点点《ML - Sklearn库简单学习》
- 平均年薪 70 万!刚刚,这类程序员又涨薪了!佩服!
- Tuxedo 介绍与安装(一)
- 访问 Confluence 6 的计划任务配置
- 修改注册表,改回主页---内容来自百度
- IB书单推荐:没有所谓的“闲书”
- pandas中DataFrame的常用操作
- [ATF] ARM Trusted firmware 构建选项
- 网页数据获取小技巧(小白)
- getAttribute()用法
- pjsip学习 ------ 二
- 三星Q4净利90亿美元同比增64%
- 苹果 iPhone 14 Pro/Max 手机最新细节曝光,终于盼来 USB-C 接口
- win10设置虚拟内存_电脑配置强,虚拟内存没有用?教你这样设置,瞬间提升流畅度!...