transforms

使用图形上下文对象的transforms方法修改变换矩阵,该方法的定义如下:

context.transform(m11,m12,m21,m22,dx,dy);

其中m11,m12,m21,m22这4个参数来决定该如何变形,dx与dy参数移动坐标原点,dx表示在坐标轴向右移多少个单位,dy表示在y坐标轴向下移动多少个单位。

translate(x,y)

使用context.transform(1,0,0,1,x,y)或context.transform(0,1,1,0,x,y)方法进行替代,前面四个参数1、0、0、1或0、1、1、0表示不对图形进行缩放操作、变形操作,dx\dy意义同上。

scale(x,y)

可以使用context.transform(1,0,0,1,x,y)或(0,1,1,0,x,y)方法进行代替,前面四个参数将图形横向扩大x倍,纵向扩大y倍,dx,dy为零,表示不移动坐标原点。

retate(angle)

替换方法如下

context.transform(Math.cos
(angle*Math.PI/180),
Math.sin(angle*Math.PI/180),
-Math.sin(angle*Math.PI/180),
Math.cos(angle*Math.PI/180),0,0);

context.transform(-Math.sin(angle*Math.PI/180),
Math.cos(angle*Math.PI/180),
Math.cos(angle*Math.PI/180),
Math.sin(angle*Math.PI/180),0,0);

下面是用transform绘制彩虹的示例

function draw(id) {
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
/*定义颜色*/
var colors = ["red","orange","yellow","green","blue","navy","purple"];
/*定义线宽*/
context.lineWidth = 10;
context.transform(1,0,0,1,100,0)
/*循环绘制圆弧*/
for (var i = 0; i < colors.length; i++) {
/*定义每次向下移动10个像素的变换矩阵*/
context.transform(1,00,0,1,0,10);
/*设定颜色*/
context.strokeStyle = colors[i];
/*绘制圆弧 */
context.beginPath();
context.arc(50,100,100,0,Math.PI,true);
context.stroke();
}
}

HTML5 矩阵变换的更多相关文章

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

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

  2. 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  3. HTML5系列五(Canvas详述)

    写在前面 闲来无事的时候会来一场一个人说走就走的旅行或者宅家里系统性的看些技术方面的书,最近在看<html5与css3权威指南>,这本书挺适合初学前端的人,虽然对于我来说只是温习相关的知识 ...

  4. Html5 Canvas transform setTransform

    Html5 Canvas transform就是矩阵变换,一种坐标的变形. 坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到. tran ...

  5. html5之canvas画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  6. 玩转html5<canvas>画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  7. HTML5 程序设计笔记(二)

    Canvas API 1.HTML5 Canvas 概述 1.1 历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget ...

  8. html5 canvas的教程

    原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路 ...

  9. webgl自学笔记——矩阵变换

    这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动 ...

随机推荐

  1. 逆波兰表达式POJ——2694

    问题描述: 逆波兰表达式是一种吧运算符前置的算术表达式,例如普通的表达式2+3的逆波兰表示为+23.逆波兰表达式的优点是运算符之间不必有优先级的关系,也不必有括号改变运算次序,例如(2+3)*4的逆波 ...

  2. 【转】【JAVA应用】多线程断点下载

    [转自] 光仔December http://blog.csdn.net/acmman 问题:多线程下载的好处? 多线程下载比单线程下载快,主要的原因是采用多线程下载,可以抢占更多的服务器资源.抢占C ...

  3. P1092 虫食算

    题目传送:https://www.luogu.org/problem/show?pid=1092 #include <iostream> #include <cstring> ...

  4. 《RabbitMQ Tutorial》译文 第 3 章 发布和订阅

    原文来自 RabbitMQ 英文官网的教程(3.Publish and Subscribe),其示例代码采用了 .NET C# 语言. In the previous tutorial we crea ...

  5. YiShop_做一个b2c商城要多少钱

    [YiShop商城系统]做一个b2c商城要多少钱?是企业在做一个b2c商城最关心的问题.每个企业都是想用最少的钱做一个好的b2c商城.但企业这种想法可能在现实中是无法实现的.网站这种产品现实中是一分钱 ...

  6. google开源服务器apprtc的搭建

    本文参考网帖: http://www.jianshu.com/p/c55ecf5a3fcf http://io.diveinedu.com/2015/02/05/%E7%AC%AC%E5%85%AD% ...

  7. MyEclipse激活步骤

    1.前言:   MyEclipse 成功安装后使用天数仅仅有30天,打开软件后常常会弹出提醒我们在5天内要激活的对话框.没有激活的话,时间一到就不能使用了. 众所周知,中国的软件是不用花钱的,这里就介 ...

  8. 使用boost::multi_index高速构建排行榜

    使用boost::multi_index高速构建排行榜 前几天在boost的maillist上看到boost::multi_index将要支持ranked_index(邮件内容见附件2),这实乃我等苦 ...

  9. Python笔记·第二章—— Python的编码问题(一)

    一.什么是编码 可以说,计算机是一个即聪明又笨蛋的家伙.说它聪明,是因为他可以做很多事情,它的强大无需多说,大家应该都有所了解以及感受.但是为什么说它又是个笨蛋呢,因为我们在电脑上写出的每一个字,保存 ...

  10. mysql默认安装目录说明

    MySQL安装完成后不象SQL Server默认安装在一个目录,它的数据库文件.配置文件和命令文件分别在不同的目录,了解这些目录非常重要,尤其对于Linux的初学者,因为 Linux本身的目录结构就比 ...