Html5 Canvas transform setTransform
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的更多相关文章
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- html5 Canvas API
详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...
- HTML5 Canvas圆盘抽奖应用（适用于Vue项目）
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- html5——canvas画布
一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...
- html5 canvas旋转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- C# 远程网络唤醒介绍及代码
一.定义 网络唤醒:唤醒休眠状态下的计算机,而不是已关机的计算机. 优势:可通过定时功能实现自动唤醒计算机,减少人力使用. 实现方法:通过被唤醒机的MAC地址进行广播发送请求,唤醒计算机. 二.硬件设 ...
- EmptyRecycle() 清空回收站
//在uses下面引用 function SHEmptyRecycleBinA(Wnd:HWND;str:PChar;WRD:DWORD):Integer;stdcall; external 'SHe ...
- tz2txt的安装与使用
tz2txt是一个开源的小工具,用于把帖子的楼主发言保存为txt文件. 目前支持天涯社区.新浪论坛(大部分版块).百度贴吧. 本文介绍tz2txt的安装与使用. 本文目录: 一.下载.安装 二.使用t ...
- WinExec
WinAPI: WinExec - 运行外部程序 //声明 WinExec( lpCmdLine: LPCSTR; {文件名和参数; 如没指定路径会按以下顺序查找: 程序目录/当前目录/Syste ...
- web应用中对配置文件的包装
<bean id="placeholderConfig" class="com.shz.utils.AdvancedPlaceholderConfigurer&qu ...
- Selenium2+python自动化19-单选框和复选框（radiobox、checkbox）
本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...
- 使用Intellij idea开发
使用IntelliJ IDEA开发SpringMVC网站(一)开发环境 使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 使用IntelliJ IDEA开发SpringMVC网站 ...
- python--自动删除文件
1.目的:定期自定删除7天前的数据 python脚本如下: #coding=utf-8 import os,time,datetime #需定时删除的目录的上一层路径 data_dir="/ ...
- 实现的一个ajax请求组件 有加载效果
var zhanglei_Ajax = function(url,data,fn){ var str = '<div class="mask" style="pos ...
- 让图片在div 中居中的方法
方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...