1. 获取图像数据：getImgData(x,y,w,h),返回的是一个ImageData对象，这个对象有三个属性保存图像信息：width/height/data。data是一个数组，保存了每个像素的信息，一个像素用4个元素保存，分别表示红、绿、蓝和透明度。
  2. 创建图像数据：createImgData(w,h),w/h表示图像的大小，返回的也是一个ImageData对象，只要设置好data，就可以用putImgData()将该图像绘制到画布上了。
  3. 绘制图像数据：putImgData(imgData,x,y),imgData通过getImgData()或createImgData()获取，x/y表示开始绘制的点。

HTML5自学笔记[ 18 ]canvas绘图基础5的更多相关文章

  1. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  2. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  3. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

  4. HTML5自学笔记[ 14 ]canvas绘图基础2

    canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径 ...

  5. HTML5自学笔记[ 23 ]canvas绘图基础7

    变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.

  6. HTML5自学笔记[ 15 ]canvas绘图基础6

    关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel ...

  7. HTML5自学笔记[ 15 ]canvas绘图实例之钟表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. tomcat和mysql安装配置总结

    我安装的tomcat和mysql都是解压缩版的.安装和配置tomcat倒没花费我多少时间,主要是mysql,几乎花费了我一天的时间. Tomcat安装总结: 首先将下载好的tomcat压缩包解压放在其 ...

  2. serialVersionUID

    serialVersionUID作用: 序列化时为了保持版本的兼容性,即在版本升级时反序列化仍保持对象的唯一性. 有两种生成方式: 一个是默认的1L,比如:private static final l ...

  3. UPC 2170 D Equal Is Not Really Equal (欧拉路径)

    题目链接:http://acm.upc.edu.cn/problem.php?id=2170 题意:给出一个字符串,比如ABACA,在这个串里,AB.BA.AC.CA各出现一次.若存在另外一个串,里面 ...

  4. Have You Ever Wondered About the Difference Between NOT NULL and DEFAULT?

    https://blog.jooq.org/2014/11/11/have-you-ever-wondered-about-the-difference-between-not-null-and-de ...

  5. Java构建工具：如何用Maven，Gradle和Ant+Ivy进行依赖管理

    原文来自:https://zeroturnaround.com/rebellabs/java-build-tools-how-dependency-management-works-with-mave ...

  6. HTML笔记（七）head相关元素<base> & <meta>

    <head>元素是所有头部元素的容器. 可添加的标签有:<title>.<base>.<link>.<meta>.<script> ...

  7. Scrum Meeting--Twelve(2015-11-3)

    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 服务器修改与优化 5h 服务器修改与优化 4h 胡亚坤 客户端数据更新 2h 客户端意见反馈收集 2 ...

  8. Redis基础知识之————空间换时间的查询案例

    空间与时间 空间换时间是在数据库中经常出现的术语,简单说就是把查询需要的条件进行索引的存储,然后查询时为O(1)的时间复杂度来快速获取数据,从而达到了使用空间存储来换快速的时间响应!对于redis这个 ...

  9. css3动画导航实现

    代码 <!DOCTYPE html> <!-- saved from url=(0223)file:///C:/Users/user/AppData/Local/Temp/HZ$D. ...

  10. css+JS实现遮罩弹框

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...