CSSASSCSSASS

About me RSS Twitter sina weibo github 知乎

三人行必有我师焉，择其善者而从之，其不善者而改之

三人行必有我师焉，择其善者而从之，其不善者而改之

三人行必有我师焉，择其善者而从之，其不善者而改之

三人行必有我师焉，择其善者而从之，其不善者而改之

三人行必有我师焉，择其善者而从之，其不善者而改之

Transform变形方法的可视化演示
作者：Neoxone 发表时间： 2010年10月22号，星期五阅读：11,158 次

canvas 的变形方法transform是三个基本变形方法的结合，他们是
translate——移动；rotate ——旋转，在transform中分解为x，y两个方向的斜切；和scale——缩放。
他的参数是变形矩阵的六个数值：m11, m12, m21, m22, dx, dy
变形矩阵：

m11	m21	dx
m12	m22	dy
0	0	1

对于transform方法的使用，其实很难把握，所以写了下面这个演示

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>cssass.com</title>
<style>
#rule,#pad{float:left;margin:10px;}
#rule p{padding;0;margin:0;line-height:25px;}
#rule label{display:inline-block;width:80px;text-align:right;font-size:12px;}
#rule input{border:0;width:40px;}
#rule b{position:relative;display:inline-block;width:150px;height:10px;font-size:0;line-height:0;background:#fff;border:1px solid #aaa;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
#rule p a{position:absolute;top:-4px;left:50%;width:15px;height:15px;margin-left:-8px;border:1px solid #d3d3d3;background:#ececec;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
#rule p a:hover{border:1px solid #999;background:#dcdcdc;}
.footer{font-size:12px;padding:10px 0;}
</style>
</head>
<body>
<div id='rule'>
	<h3>Transform方法可视化操作演示</h3>
	<p onmousedown='G.change(this,event,4);'><label>水平缩放 m11: </label> <b class='range'><a onfocus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='m11' type='text' /></p>
	<p onmousedown='G.change(this,event,4);'><label>y轴斜切 m12: </label> <b class='range'><a onfocus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='m12' type='text' /></p>
	<p onmousedown='G.change(this,event,4);'><label>x轴斜切 m21: </label> <b class='range'><a onfocus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='m21' type='text' /></p>
	<p onmousedown='G.change(this,event,4);'><label>垂直缩放 m22: </label> <b class='range'><a onfocus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='m22' type='text' /></p>
	<p onmousedown='G.change(this,event,1000);'><label>平移 dx: </label> <b class='range'><a onfocus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='dx' type='text' /></p>
	<p onmousedown='G.change(this,event,1000);'><label>纵移 dy: </label> <b class='range'><a onfocus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='dy' type='text' /></p>
	<div class='footer'>首先在右侧用鼠标画一矩形。<br />Javascript by <a href='http://www.cssass.com'>cssass.com</a></div>
</div>
<canvas id="pad" width='800' height="600" style="position:relative;border:1px solid #c3c3c3;cursor:crosshair;">注意：ie9以下用户请绕行</canvas>
<script>
var $id=function(o){return document.getElementById(o);}
var con=$id("pad").getContext('2d');
var G={};
G.x1=G.y1=G.x2=G.y2=0;
G.val=[[4,1],[4,0],[4,0],[4,1],[1000,0],[1000,0]];
G.init=function(){
	var list=$id('rule').getElementsByTagName('p');
	var left, value;
	for(var i=0; i<list.length; i++){
		value = G.val[i][1];
		left =(0.5 + G.val[i][1] / G.val[i][0] ) * 100;
		list[i].getElementsByTagName('a')[0].style.left= left + '%';
		list[i].getElementsByTagName('input')[0].value= value;
	}
}
G.draw=function(){
	G.init();
	var e = arguments[0];
		G.x1 = (e.layerX) ? e.layerX : e.offsetX,
		G.y1 = (e.layerY) ? e.layerY : e.offsetY,
	$id("pad").onmousemove=function(e){
		con.clearRect(0,0,800,600);
		G.x2= (e.layerX) ? e.layerX : e.offsetX;
		G.y2= (e.layerY) ? e.layerY : e.offsetY;
		con.save();
		con.translate(G.x1,G.y1)
		G.rect(G.x1,G.y1,G.x2,G.y2);
		con.restore();
	}
	$id("pad").onmouseup=function(){
		$id("pad").onmousedown=null;
		$id("pad").onmousemove=null;
	}
}
G.change=function(obj,e,l,v){
	var o=obj.getElementsByTagName('a')[0];
	var e = e ? e : window.event;
	if(!window.event) {e.preventDefault();}
	var tX=o.offsetLeft,
		dx=e.clientX;
	document.onmousemove=function(e){
		var e = e ? e : window.event;
		var len=tX+e.clientX-dx+8;
		if(len>=0 && len<=150){
			var rat=(len / 150) * 100;
			o.style.left=rat+ "%";
			obj.getElementsByTagName('input')[0].value =l * Math.round((rat - 50)*10)/1000;
			G.transform();
		}
		if(window.event) e.returnValue=false;
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
G.transform=function(){
	var m11=($id('m11').value == 0)? 0.001 : $id('m11').value,  //firefox下m11,m12值不能为0
		m12=$id('m12').value,
		m21=$id('m21').value,
		m22=($id('m22').value == 0)? 0.001 : $id('m22').value,
		dx=$id('dx').value,
		dy=$id('dy').value;
	con.clearRect(0,0,800,600);
	con.save();
	con.translate(G.x1,G.y1);  //变形的参考点设为图形的左上角
	con.transform(m11, m12, m21, m22, dx, dy);
	G.rect(G.x1,G.y1,G.x2,G.y2);
	con.restore();
}
G.rect=function(x1,y1,x2,y2){
	var grd=con.createLinearGradient(0, 0, x2 - x1, y2 - y1); //弄一个渐变效果
			grd.addColorStop(0,"#3F5816");
			grd.addColorStop(1,"#B40000");
		con.fillStyle=grd;
		con.fillRect(0, 0, x2 - x1, y2 - y1);
}
window.addEventListener("load", G.init, false);
$id("pad").addEventListener("mousedown", G.draw, false);
</script>
</body>
</html>

类似文章：bezierCurveTo方法的可视化操作：贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟
关于canvas的其他方法，可以参考这篇文章：MDC的canvas经典教程辑和个人学习笔记

相关文章:

《Canvas模拟小时候一种很炫的绘图玩具》
《volume滑动块——html5中input type=’range’的模拟》
《小试canvas鼠标绘图》
《Three.js制作3D螺旋线动画》
《说说HTML5》

标签： canvas, HTML5, Matrix, transform

这篇文章发布于 2010年10月22号，星期五，11:34，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

一条评论发表在“Transform变形方法的可视化演示”上

ONEBOYS 说：

2010年11月3日于15:30

这里有CSS3的transform的可视化演示
transforms in css3

回复

留下回复

话不多说
月圆之夜

月势
最近文章
最近评论
- piao 在炒冷饭，Metro风混搭瀑布流上的评论:膜拜，刷新的时候有点问题，有时候刷新滚动条没了
- Neoxone 在天命：响应式布局的单位——VW/VH 上的评论:@顾佳佳, ):18:(
- 顾佳佳在天命：响应式布局的单位——VW/VH 上的评论:图挂了 ):16:(
- 心智无力的内敛在在canvas 2D API下实现3D效果（3D版心形函数的绘制）上的评论:@Neoxone, 恩，我感觉的没错作用是一样的，就是稍微简单了点儿。
- Neoxone 在在canvas 2D API下实现3D效果（3D版心形函数的绘制）上的评论:@心智无力的内敛, webGL里没怎么简单。我们这个如果要转换的点非常多的话，那是根本不可用的，为了效率，webGL里是用矩阵来存储的，而且用来存储的矩阵还需要分模型矩阵，视图矩阵，投影矩阵。我们这个只是一个简单的模拟罢了。
- 心智无力的内敛在在canvas 2D API下实现3D效果（3D版心形函数的绘制）上的评论:问个问题，那个投影算法，跟webgl中的渲染，是不是差不多呀？我感觉差不多
- 追风少年在 (Three.js) 页面展现3D模型上的评论:楼主很棒！有帮助！
- xixiAlly 在简单效果——滚动展示上的评论:非常棒！！！
- 子木在 (Three.js) 页面展现3D模型上的评论:@xiaoli,
- jy 在 Three.js制作3D螺旋线动画上的评论:好厉害能请教一下怎么做的么方便告诉QQ吗