Html5 Canvas transform就是矩阵变换，一种坐标的变形。

坐标变形的三种方式，平移translate, 缩放scale以及旋转rotate都可以通过transform做到。

transform(m11, m12, m21, m22, dx, dy)：这个方法必须将当前的变形矩阵乘上下面的矩阵：

m11

m21

dx

m12

m22

dy

0

0

1

也就是说假设 变化前A（x,y）得到 变换后B(x’,y’)可以通过乘以上述矩阵即可得到：

比如说：缩放scale

x”=x*a;            //x放大a倍

y”=y*b;            //y放大b倍

只需transform(a, 0, 0, b, 0, 0)；

A（x,y）通过transform就得到了放大后的B(x’,y’)；与方法context.scale（a，b）同效；

比如 旋转rotate

假设将（x,y）绕原点逆时针旋转θ得到（x”,y”）,则：

x’=x*cosθ-y*sinθ

y’=x*sinθ y*cosθ

只需transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0）

A（x,y）通过transform就得到了旋转后的B(x’,y’)；与方法context.rotate(θ)同效；

就是说只要知道变化前和变换后的坐标转化公式，就能通过与矩阵相乘的方法得到；

setTransform这个方法重置当前的变形矩阵为单位矩阵，然后以相同的参数调用 transform 方法。就是消除前面transform行为对这次行为的影响；

提供一个代码可以自己研究一下

<!DOCTYPE HTML>

<html>

<head>

<script type=”text/javascript”>

function drawShape(){

// get the canvas element using the DOM

var canvas = document.getElementById(“mycanvas”);

// Make sure we don”t execute when canvas isn”t supported

if (canvas.getContext){

// use getContext to use the canvas for australian casinos online drawing

var ctx = canvas.getContext(“2d”);

var sin = Math.sin(Math.PI/6);

var cos = Math.cos(Math.PI/6);

ctx.translate(200, 200);

var c = 0;

for (var ratedbet.co.uk i=0; i <= 12; i ) {

c = Math.floor(255 / 12 * i);

ctx.fillStyle = “rgb(” c “,” c “,” c “)”;

ctx.fillRect(0, 0, 100, 100);

ctx.transform(cos, sin, -sin, cos, 0,0);

}

ctx.setTransform(-1, 0, 0, 1, 200, 200);

ctx.fillStyle = “rgba(100, 100, 255, 0.5)”;

ctx.fillRect(50, 50, 100, 100);

}else {

alert(“You need Safari or Firefox 1.5 to see this demo.”);

}

}

</script>

</head>

<body onload=”drawShape();”>

<canvas id=”mycanvas” width=”400″ height=”400″></canvas>

</body>

</html>

Html5 Canvas transform setTransform的更多相关文章

  1. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  2. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  3. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  4. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  5. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  6. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  7. HTML5 Canvas圆盘抽奖应用（适用于Vue项目）

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

  8. html5——canvas画布

    一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...

  9. html5 canvas旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. SHELL脚本攻略（学习笔记）--2.4 find

    转载请注明出处:http://www.cnblogs.com/f-ck-need-u/p/5916657.html   超级强大的find命令. find搜索是从磁盘搜索,而不是从数据库搜索. 2.4 ...

  2. 样式link属性media用法--媒体类型查询

    引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...

  3. CSS3，JS可用于刷新按钮或者加载动画的动画

    html: <input type="button" id="zidong3" style="top: 12px;" /> cs ...

  4. Java 基础知识总结 (三、运算符)

    三.Operators 运算符 Assignment Operators(赋值运算符) =   +=   -=   %=   *=   /=    <<=     >>=    ...

  5. Spring 4 官方文档学习（十二）View技术

    关键词:view technology.template.template engine.markup.内容较多,按需查用即可. 介绍 Thymeleaf Groovy Markup Template ...

  6. c#开发Mongo笔记第四篇

    今天是个伟大的日子,不得不说小苹果的歌词真是深入人心啊. 不过今天伟大并不是因为我种下一颗种子,而是我从今天不再写demo,而是进入项目的正式开发当中,毕竟项目时间有限(想必各位码农也都深有体会吧), ...

  7. 怎样把windows中安装的程序列出来？

    症状/问题我怎样把windows中安装的程序信息输出到一个文本文件中?解决方法使用 windows 操作系统中的命令:wmic就可以做到.下面的命令就可以把系统中安装的程序都输出到文件ProgramL ...

  8. 解决ubuntu bash: cd: ~:Permission denied

    cd /usr/local/hadoop 报错:bash: cd: /usr/local/hadoop:Permission denied 输入指令: /usr/local/hadoop 原因是没有权 ...

  9. 万万没想到，3D打印居然可以做这些逆天设计

    3D打印一直被冠以“高科技”头衔,似乎离我们的日常生活还很遥远.其实不然,随着技术的创新,3D打印技术逐渐深入各个领域,工业生产.商业.医学.建筑.艺术等领域都能看到3D打印技术的影子.它将会改变我们 ...

  10. PHP创建缩略图造成图片质量低下的完美解决方法

    近期弄个论坛,在首页要有个排名,显示评论最多的前十位用户的列表,列表有个略图是用户最新上传的作品,如果使用原来的图,图片过大,首页加载过慢,因此要使用略图 以上来使用imagecopyresized这 ...