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. Redis在本地测试没有问题,上传的服务器后出现错误

    在服务器上,new Redis 可以拿到对象数据,但是其他操作就会报错. Redis 开启过程中,遇到错误 . :( protocol error, got 'S' as reply type byt ...

  2. NGUI_01

    序言:这是张三疯第一次开始NGUI插件的学习,刚开始学习,肯定有很多漏洞,后期会及时的补上的.希望大家可以见谅,希望大佬多多指教. 扩充:为提供和我一样的小白找不到免费的NGUI插件,这里分享百度网盘 ...

  3. Django的ModelForm组件

    创建类 from django.forms import ModelForm from django.forms import widgets as wd from app01 import mode ...

  4. Wannafly挑战赛5 补题

    A 珂朵莉与宇宙 题目链接: https://www.nowcoder.com/acm/contest/36/A 思路: 科学暴力:枚举前缀和,同时计算前缀和里面可能出现的完全平方数,匹配前缀和 与完 ...

  5. UWP 用Thumb 控件仿制一个可拖动悬浮 Button

    参考了 http://www.cnblogs.com/zhanggaoxing/p/6403430.html,并加以改进. 最终效果::: Thumb 的原生事件 DragStarted,DragDe ...

  6. ArcGIS jsAPI (4.x)本地部署字体符号乱码

    在下载了新版arcigs 的 JS API 后,每次部署在IIS中都会出现部件字体乱码的问题,需配置响应标头和添加文件映射 一. HTTP响应标头配置 在 IIS 中的 HTTP响应标头 中加入以下配 ...

  7. Selenium中如何使用xpath更快定位

    在学习Selenium路上,踩了也不少坑,这是我最近才发现的一个新写法,好吧,"才发现"又说明我做其他事了.对的,我现在还在加班! 开车~~~ 例子:知乎网 标签:Python3. ...

  8. jqgrid嵌套子表格

    jqgrid的subGrid子表格 jqGrid的一项高级功能就是嵌套子表格,使用起来也非常简单.使用的方式有两种: 使用普通的subGrid子表格: 使用一个完整jqGrid作为子表格: 1.选项含 ...

  9. python爬虫:使用Selenium模拟浏览器行为

    前几天有位微信读者问我一个爬虫的问题,就是在爬去百度贴吧首页的热门动态下面的图片的时候,爬取的图片总是爬取不完整,比首页看到的少.原因他也大概分析了下,就是后面的图片是动态加载的.他的问题就是这部分动 ...

  10. android 读取系统文件 wpa_supplicant

    1,须要权限 <uses-permission android:name="android.permission.ACCESS_SUPERUSER" /> 2,下载 R ...