canvas还提供提供了一些动态方法,使图像可以旋转、缩放和移动,与css3中的方法一样。

  1. 移动:translate(x,y),x和y为横竖方向的偏移量
  2. 旋转:rotate(弧度),弧度=角度*Math.PI/180;注:多次旋转角度累加。
  3. 缩放:scale(x,y),x和y为水平和垂直方向的缩放比。

注意:scale缩放有个弊端,那就是即缩放宽高,又缩放边框的宽度,所有在使用时应该注意。

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

  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自学笔记[ 14 ]canvas绘图基础2

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

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

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

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

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

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

    获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息, ...

  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. SQL十进制和十六进制相互转换

    CREATE FUNCTION ufn_ConvertInt2Hex ( @Num BIGINT ) ) AS BEGIN /************************************* ...

  2. echo输出到stderr

    echo "Your error message here" >&2 This is a normal echo (which goes to stdout), ho ...

  3. JavaScript语法(一)

    JavaScript 用法 HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 & ...

  4. 巧遇"drwxr-xr-x."权限

    drwxr-xr-x. 是SELinux的问题 REDHAT6之后安全提高所以设置的 关闭SELINUX就好了 因为新版本ls把多acl和selinux属性加进去了,与系统无关,新版本的ls代码使用1 ...

  5. 第一次写python爬虫

    花了4天终于把写完了把国内的几个漏洞平台爬完了,第一次写py,之前一直都在说学习,然后这周任务是把国内的漏洞信息爬取一下.花了1天学PY,剩下的1天一个.期间学习到了很多.总结如下: ======== ...

  6. Beaglebone Black 和树莓派

    我不是创客.我买了个 Beaglebone Black 来玩,主要是拿来学习. 入手前,看过好几个树莓派 (Raspi - 2 Model B)和 Beaglebone Black (BBB) 比较, ...

  7. Java构建工具:如何用Maven,Gradle和Ant+Ivy进行依赖管理

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

  8. Metasploit RPC服务共享

    1) 启动一个新的MSF RPC服务,-P参数后面指定连接到的RPC服务需要提供的口令,-U参数指定连接所需输入的用户名,使用-a 0.0.0.0将RPC服务绑定到所有的网络地址,否则服务默认只绑定到 ...

  9. zoj 2107&&hdu 1007最近点对问题

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1107 Quoit Design Time Limit: 5 Seconds   ...

  10. python_way,day8 面向对象【多态、成员--字段 方法 属性、成员修饰符、特殊成员、异常处理、设计模式之单例模式、模块:isinstance、issubclass】

    python_way day8 一.面向对象三大特性: 多态 二.面向对象中的成员 字段.方法属性 三.成员修饰符 四.特殊成员 __init__.__doc__.__call__.__setitem ...