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. 【leetcode❤python】121. Best Time to Buy and Sell Stock

    #-*- coding: UTF-8 -*- #Method1 :超时#class Solution(object):#    def maxProfit(self, prices):#      # ...

  2. mysql更改已有数据表的字符集，保留原有数据内容

    mysql更改已有数据表的字符集,保留原有数据内容     原文网址:http://blog.csdn.net/learn_2/article/details/6460370 环境:在应用开始阶段没有 ...

  3. JAVA中在Myeclipse里把表导入成相应的poco实体类

    参考:地址: http://blog.csdn.net/jintaiyong/article/details/7383982

  4. Scrum Meeting---Eight(2015-11-3)

    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 数据库与客户端通讯 5h 服务器与客户端通讯测试 4h 胡亚坤 好友添加 2h 好友添加 2h 刘猛 ...

  5. javascript学习-原生javascript的小特效（多个运动效果整理）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  6. org.apache.jasper.JasperException: Expecting "jsp:param" standard action with "name" and "value" attributes

      jasper  英 ['dʒæspə]  美 ['dʒæspɚ] 跟读 口语练习 n. 碧玉:墨绿色 n. (Jasper)人名:(德)雅斯佩尔:(西)哈斯佩尔 JasperException 异 ...

  7. bootstrap学习笔记<九>（菜单，按钮。导航基本元素）

    有了bootstrap作导航不再麻烦,几个样式,几个标签就能轻松搞定. 下面就来分解学习导航条的制作. 一.首先是下拉菜单 <div class="dropdown"> ...

  8. sp工具类编写

    package com.itheima.mobilesafe74.utils; import android.content.Context; import android.content.Share ...

  9. Android控件之ToggleButton(多状态按钮)

    一.概述 ToggleButton有两种状态:选中状态和没选中状态(类似一个开关),并且需要为不同的状态设置不同的显示文本 二.ToggleButton属性 android:checked = &qu ...

  10. Android控件之ImageView(显示图片的控件)

    一.ImageView属性: android:src = "@drawable/ic_launcher"——ImageView的内容图像(可以和android:background ...