HTML5 矩阵变换
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 矩阵变换的更多相关文章
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- HTML5系列五(Canvas详述)
写在前面 闲来无事的时候会来一场一个人说走就走的旅行或者宅家里系统性的看些技术方面的书,最近在看<html5与css3权威指南>,这本书挺适合初学前端的人,虽然对于我来说只是温习相关的知识 ...
- Html5 Canvas transform setTransform
Html5 Canvas transform就是矩阵变换,一种坐标的变形. 坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到. tran ...
- html5之canvas画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- 玩转html5<canvas>画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- HTML5 程序设计笔记(二)
Canvas API 1.HTML5 Canvas 概述 1.1 历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget ...
- html5 canvas的教程
原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路 ...
- webgl自学笔记——矩阵变换
这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动 ...
随机推荐
- 【17-06-16】Java入门测试题,测测你基础知识掌握程度(附答案及个人解析)
描述 前几天在知乎里看到一份这样的题,当时只是随便做了一下,对了一下答案.昨天又有了一份进阶的题,里面有些还是需要记录一下,于是就从这个入门的题开始. 题目和答案来自阿里云大学 - 知乎专栏 题目 现 ...
- Webstorm 快捷键大全 整理收录
"工欲善其事,必先利其器" 作为一名开发人员,好用的工具能让你效率更高,剩下的时间用来偷懒吹牛逼吧... 以下整理Webstorm快捷键大全 Windows版本 注释(// 或 ...
- 自己动手实现mybatis动态sql
发现要坚持写博客真的是一件很困难的事情,各种原因都会导致顾不上博客.本来打算写自己动手实现orm,看看时间,还是先实现一个动态sql,下次有时间再补上orm完整的实现吧. 用过mybatis的人,估计 ...
- [WPF]本地化入门
1. 前言 WPF的本地化是个很常见的功能,我做过的WPF程序大部分都实现了本地化(不管最终有没有用到).通常本地化有以下几点需求: 在程序启动时根据CultureInfo.CurrentUICult ...
- javaWeb开发中关于eclipse等ide重新部署或重启项目等原因造成上传文件丢失问题解决方案
在开发项目时,有时候需要用到上传功能,比如头像上传等,其文件会保存到服务器中.但是我发现在用eclipse做项目的过程中,每次重新部署项目,原来上传的文件就会丢失. 其原因是因为每次项目修改后,ecl ...
- idea从git上拉取并管理项目
1:idea从git上拉取项目 (1)FILE --> New --> Project from Version Control --> Git (2):输入项目的Https SSH ...
- Vue 事件
一.事件冒泡 方法一.使用event.cancelBubble = true来阻止冒泡 <div @click="show2()"> <input type=&q ...
- C++ 函数对象
函数对象 c++中函数名后的()称为函数调用运算符.函数调用运算符也可以重载,如果某个类重载了函数调用运算符,则该类的实例就是一个函数对象.函数对象本身并不是很有用,但他们使得算法操作的参数化策略成为 ...
- 单点登录cas常见问题(十四) - ST和TGT的过期策略是什么?
ST和TGT的过期策略能够參看配置文件:ticketExpirationPolicies.xml 1.先说ST:ST的过期包含使用次数和时间,默认使用一次就过期,或者即使没有使用.一段时间后也要过期 ...
- Triangle LeetCode |My solution
Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...