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的更多相关文章

  1. <canvas>drawImage()方法无法显示图片

    在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...

  2. canvas drawImage异步特性

    先看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. Canvas drawImage API

    drawImage <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. Canvas DrawImage截取和压缩图片的陷阱

    html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...

  5. canvas.drawImage()方法详解

    首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...

  6. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

  7. canvas drawImage 不显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. canvas drawImage图片不显示问题

    初次学习canvas,用来做笔记记录下遇到的问题及解决方案 这里是要将一张图片写到canvas里,按照网上搜索,初写了段代码,可是却没显示,以为是路径问题,不能跨域名使用,后来改为相对路径后,仍然无效 ...

  9. canvas drawimage绘制图像出错(默认canvas300*150)解决办法

    今天在开发中,再一次踩了以前踩过的坑,写完程序在这里写一下,分享给大家也避免再次遇坑. //默认的canvas <canvas id ="canvas"></ca ...

随机推荐

  1. Android DIY之路 (一) 指定区域多图片合成 放大 缩小 镜像 旋转 等(转)

    惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...

  2. Netty实战

    一.Netty异步和事件驱动1.Java网络编程回顾socket.accept 阻塞socket.setsockopt /非阻塞2.NIO异步非阻塞a).nio 非阻塞的关键时使用选择器(java.n ...

  3. 爬虫入门【2】Requests库简介

    发送请求 使用Requests发送网络请求很简单 #首先要导入requests库 import requests #返回一个Response对象 r=requests.get('https://git ...

  4. 新升级!EasyNVR3.0功能概述--直播与录像

    背景介绍: 对于摄像机直播已经是我们司空见惯的需求,但是,许多用户在现有的直播的基础上更有录像的需求,并且有关于录像的删除定时等录像计划的需求,更有客户不仅需要这些功能,还需要将这些功能集成到自身的业 ...

  5. 微信小程序 入门

    目录结构: app.json  .小程序的全局配置 pages:  当前小程序所有页面路径. window:小程序所有页面的顶部背景颜色,文字颜色定义在这里. tabBar:  设置底部 tab ne ...

  6. 在spring boot中使用自定义的properties

    1 在application.properties中添加 android.name=Tim android.password=123456 新建一个保存该Setting的配置类, @Configura ...

  7. VS2017下编译iconv

    从http://www.gnu.org/software/libiconv/ 下载 libiconv-1.11.1, 这是最后一个支持MSVC编译的版本. 打开 Visual Studio 2017 ...

  8. linux c编程:系统数据文件和信息

    linux系统相关的文件信息包含在/etc/passwd文件和/etc/group中.每次登录linux系统以及每次执行ls -l命令时都要使用口令文件.这些字段都包含在<pwd.h>中定 ...

  9. Python 中奇妙的下划线

    单个下划线(_) 通常有三种用法: 在python解释器: 单个下划线代表上次在交互解释期对话中(控制台)执行的结果.这种情况在标准的CPython解释器中首次被实现,接下来这种习惯也被保持下来: & ...

  10. SAP ATP邏輯可用性檢查

    [转http://tqmeng.blog.163.com/blog/static/169263916201162002414612/]SAP ATP邏輯可用性檢查1.可用性檢查群組OVZ2主要用於檢查 ...