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>
Canvas drawImage的更多相关文章
- <canvas>drawImage()方法无法显示图片
在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...
- canvas drawImage异步特性
先看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Canvas drawImage API
drawImage <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Canvas DrawImage截取和压缩图片的陷阱
html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...
- canvas.drawImage()方法详解
首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...
- canvas - drawImage()方法绘制图片不显示的问题
canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等. 问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...
- canvas drawImage 不显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas drawImage图片不显示问题
初次学习canvas,用来做笔记记录下遇到的问题及解决方案 这里是要将一张图片写到canvas里,按照网上搜索,初写了段代码,可是却没显示,以为是路径问题,不能跨域名使用,后来改为相对路径后,仍然无效 ...
- canvas drawimage绘制图像出错(默认canvas300*150)解决办法
今天在开发中,再一次踩了以前踩过的坑,写完程序在这里写一下,分享给大家也避免再次遇坑. //默认的canvas <canvas id ="canvas"></ca ...
随机推荐
- Android DIY之路 (一) 指定区域多图片合成 放大 缩小 镜像 旋转 等(转)
惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...
- Netty实战
一.Netty异步和事件驱动1.Java网络编程回顾socket.accept 阻塞socket.setsockopt /非阻塞2.NIO异步非阻塞a).nio 非阻塞的关键时使用选择器(java.n ...
- 爬虫入门【2】Requests库简介
发送请求 使用Requests发送网络请求很简单 #首先要导入requests库 import requests #返回一个Response对象 r=requests.get('https://git ...
- 新升级!EasyNVR3.0功能概述--直播与录像
背景介绍: 对于摄像机直播已经是我们司空见惯的需求,但是,许多用户在现有的直播的基础上更有录像的需求,并且有关于录像的删除定时等录像计划的需求,更有客户不仅需要这些功能,还需要将这些功能集成到自身的业 ...
- 微信小程序 入门
目录结构: app.json .小程序的全局配置 pages: 当前小程序所有页面路径. window:小程序所有页面的顶部背景颜色,文字颜色定义在这里. tabBar: 设置底部 tab ne ...
- 在spring boot中使用自定义的properties
1 在application.properties中添加 android.name=Tim android.password=123456 新建一个保存该Setting的配置类, @Configura ...
- VS2017下编译iconv
从http://www.gnu.org/software/libiconv/ 下载 libiconv-1.11.1, 这是最后一个支持MSVC编译的版本. 打开 Visual Studio 2017 ...
- linux c编程:系统数据文件和信息
linux系统相关的文件信息包含在/etc/passwd文件和/etc/group中.每次登录linux系统以及每次执行ls -l命令时都要使用口令文件.这些字段都包含在<pwd.h>中定 ...
- Python 中奇妙的下划线
单个下划线(_) 通常有三种用法: 在python解释器: 单个下划线代表上次在交互解释期对话中(控制台)执行的结果.这种情况在标准的CPython解释器中首次被实现,接下来这种习惯也被保持下来: & ...
- SAP ATP邏輯可用性檢查
[转http://tqmeng.blog.163.com/blog/static/169263916201162002414612/]SAP ATP邏輯可用性檢查1.可用性檢查群組OVZ2主要用於檢查 ...