CSSASS三人行

姐姐的婚礼作者：ONEBOYS 发表时间： 2010年11月19号，星期五阅读：1,482 次

2010.11.12日，姐姐踏入了婚姻的殿堂。
这些照片放在这里，一为祝福，二为自勉。

CSS3的崛起——体验webkit的3D-Effect 作者：ONEBOYS 发表时间： 2010年11月16号，星期二阅读：3,322 次

在性能保证的前提下，向更高更炫的效果发起冲击是未来Web的一大需求，而CSS必将借此大展抱负，崛起于未来的web技术之林，独树一帜，无可撼动。
在这条道路上，Apple公司无疑是一位先驱：他们要将web交互推入3D时代。
目前，不仅W3C通过了3d-transforms的工作草案，在webkit上3d-transforms也已经实现了。

本文意在体验，浅析3d-transforms，读者如对3d-transforms有技术方面的兴趣，可以阅读以下文档：
W3C的 css3-3d-transforms (工作草案)
Apple的 CSS Visual Effects Guide —— transforms （指南）
Apple的 Visual Effects Transform Functions （属性方法介绍）
westciv.com的 3Dtransforms （可视化演示）
webkit.org的 3D Transforms (有Demo讲解)

警告：以下所有Demo效果须使用safari5，开源的chrominm浏览器进行体验，而即使是在chrome12下的效果也会大打折扣。
下面这个demo来自marcofolio.net：3d animation using pure CSS3
以下是代码删减版

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cssass.com</title>
<style>
*{padding:0;margin:0;}
body { background-color:#deddcd;}
#movieposters { list-style:none; margin:100px;}
#movieposters li {float:left;
	-webkit-perspective: 500;
	/*
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective;
	-webkit-transition-duration: 0.5s;
	*/
}
/*
#movieposters li:hover { -webkit-perspective: 5000; }
*/
#movieposters li img { border:10px solid #fcfafa;-webkit-box-shadow:0 3px 10px #888;
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform;
	-webkit-transition-duration: 0.5s;
}
#movieposters li:hover img {-webkit-transform: rotateY(0deg); }
.movieinfo {border:10px solid #fcfafa; padding:0 10px; width:120px; height:100px; background-color:#deddcd; margin:-125px 0 0 55px; position:absolute;-webkit-box-shadow:0 10px 20px #888;
	-webkit-transform: translateZ(30px) rotateY(30deg);
	-webkit-transition-property: transform, box-shadow, margin;
	-webkit-transition-duration: 0.5s; }
#movieposters li:hover .movieinfo {-webkit-box-shadow:0 5px 10px #888; margin:-105px 0 0 30px;
	-webkit-transform: rotateY(0deg); }
.movieinfo h3 {color:#7a3f3a;font-family:Georgia; text-align:center; }
.movieinfo p {padding:10px 0;}
.movieinfo a { display:block; background:#7a3f3a; padding:3px 0; color:#eee; text-decoration:none; text-align:center; margin:0 auto;-webkit-border-radius:5px; }
.movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; }
</style>
</head>
<body>
<ul id="movieposters">
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			<h3>Avatar 2</h3>
			<p>You like a baby</p>
			<a href="http://www.cssass.com" title="I see you">More info</a>
		</div>
	</li>
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			<h3>Avatar 2</h3>
			<p>You like a baby</p>
			<a href="http://www.cssass.com" title="I see you">More info</a>
		</div>
	</li>
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			<h3>Avatar 2</h3>
			<p>You like a baby</p>
			<a href="http://www.cssass.com" title="I see you">More info</a>
		</div>
	</li>
</ul>
</body>
</html>

进一步删减

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cssass.com</title>
<style>
*{padding:0;margin:0;list-style:none; }
body { background:#deddcd;margin:100px;}
#movieposters li {float:left;
	-webkit-perspective: 500;
}
#movieposters li img {
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform;
	-webkit-transition-duration: 0.5s;
}
#movieposters li:hover img {
	-webkit-transform: rotateY(0deg);
}
.movieinfo {
	position:absolute; width:120px; height:100px; background:#fff; margin:-125px 0 0 55px;
	-webkit-transform: translateZ(30px) rotateY(30deg);
	-webkit-transition-property: transform, margin;
	-webkit-transition-duration: 0.5s;
}
#movieposters li:hover .movieinfo {
	margin:-105px 0 0 40px;
	-webkit-transform: rotateY(0deg);
}
</style>
</head>
<body>
<ul id="movieposters">
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			Avatar 2
		</div>
	</li>
</ul>
</body>
</html>

上面的Demo中，我们一直没有应用-webkit-transform-style: preserve-3d;这个属性。
事实上，上面的Demo仅仅是”伪3D”,只是我们面对的是屏幕这样一个2D平面，上面的Demo还无法区分出真3D和伪3D。

我们再看看下面这个真3D的Demo——来自webkit.org

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Explaining transform-style</title>
  <style>
    #container {
      position: relative;
      height: 300px;
      width: 300px;
      margin: 50px 100px;
      border: 2px solid blue;
      -webkit-perspective: 500;
    }
    #parent {
      margin: 10px;
      width: 280px;
      height: 280px;
      background-color: #844BCA;
      opacity: 0.8;
      -webkit-transform-style: preserve-3d;
      -webkit-animation: spin 10s infinite linear;
    }
    #container:hover #parent {
      -webkit-transform-style: flat;
    }
    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(360deg); }
    }
    #parent > div {
      position: absolute;
      top: 40px;
      left: 40px;
      width: 200px;
      height: 200px;
      padding: 10px;
      -webkit-box-sizing: border-box;
    }
    #parent > :first-child {
      background-color: #49DC93;
      -webkit-transform: translateZ(-100px) rotateY(45deg);
    }
    #parent > :last-child {
      background-color: #FF6;
      -webkit-transform: translateZ(50px) rotateX(20deg);
      -webkit-transform-origin: 50% top;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="parent">
      <div>-webkit-transform: translateZ(-100px) rotateY(45deg);</div>
      <div>-webkit-transform: translateZ(50px) rotateX(20deg);</div>
    </div>
  </div>
</body>
</html>

hover状态下transform-style值是flat;未hover状态下是preserve-3d —— 两者的效果差异一目了然。
在上面的Demo中，不仅应用了transform属性，还使用了webkit css中另一个很牛的属性——animation
（而我们最前面的Demo也使用了webkit css中第三个很牛的属性——transition）

参照上面的Demo，我们对原demo也做个修改，

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cssass.com</title>
<style>
*{padding:0;margin:0;list-style:none; }
body { background:#deddcd;margin:100px;}
#movieposters{
	-webkit-perspective: 1000;
}
#movieposters li {float:left;
	-webkit-animation: spin 10s infinite linear;
}
#movieposters li.first{
	-webkit-transform-style: preserve-3d;
}
#movieposters li.second{
	-webkit-transform-style: plat;
}
 @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(360deg); }
    }
#movieposters li img {
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform;
	-webkit-transition-duration: 0.5s;
}
#movieposters li:hover img {
	-webkit-transform: rotateY(0deg);
}
.movieinfo {
	position:absolute; width:120px; height:100px; background:#fff; margin:-125px 0 0 55px;
	-webkit-transform: translateZ(30px) rotateY(30deg);
	-webkit-transition-property: transform, margin;
	-webkit-transition-duration: 0.5s;
}
#movieposters li:hover .movieinfo {
	margin:-105px 0 0 40px;
	-webkit-transform: rotateY(0deg);
}
</style>
</head>
<body>
<ul id="movieposters">
	<li class='first'>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			Avatar 2
		</div>
	</li>
	<li class='second'>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			Avatar 2
		</div>
	</li>
</ul>
</body>
</html>

标签： 3D, animation, CSS3, trabsform, transition, webkit
发布在 CSS3 | 4 条评论 »

纯css打造投影效果——CSS3属性transform的应用作者：ONEBOYS 发表时间： 2010年11月3号，星期三阅读：2,448 次

刚在twitter上看见这个效果。
Getting Clever with CSS3 Shadows
插播广告——“拥有css3，拥有无限可能。”

这个效果里，除了应用阴影属性box-shadow之外，还需要一个重要属性的支持——transform
其实transform算是一个混合属性，它同canvas和svg的transform一样，带有几个独立的方法：平移（translate），缩放（Scaling），旋转（Rotating），另外，还有一个斜切（Skewing）。其实，斜切和旋转是有关系的：当skewX=-skewY时，它就是一个纯粹的Rotate。

下面就是效果演示。略有改动，原demo没有考虑opera，在此补上。
所以，应该除了ie9以下的浏览器，其他所以用户都能看见效果。

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>skew</title>
	<style>
	.box {
		position: absolute;
		padding: 2px;
		background: white;
		-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		box-shadow: 1px 2px 4px rgba(0,0,0,.5);
	}
	.box img {
		display:block;
		width: 200px;
		border: 1px inset #8a4419;
		background:#eee;
	}
	.box:after {
		content: '';
		-webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		-moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		position: absolute;
		width: 50%;
		height: 20px;
		bottom: 20px;
		right: 90px;
		z-index: -1;
		-webkit-transform: skew(-40deg);
		-moz-transform: skew(-40deg);
		-o-transform: skew(-40deg);
		transform: skew(-40deg);
	}
	</style>
</head>
<body>
<div class="box">
	<img src='http://www.cssass.com/blog/resource/avatar/avatar.jpg'/>
</div>
</body>
</html>

————几分钟之后——————
我们发现safari竟然不支持。
但千万不要怀疑safari的transform能力。——它可是支持3D变换的。
Visual Effects Transform Functions
从中可以看出，safari的transform完全应该可以达到效果的。
（另外，safari的Transition和Animation这两个CSS属性/方法也是异常的强大）

现在把目光转向box-shadow属性。
前面我们的写法是：box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
这里有5个属性，分别表示 X偏移offset-x，Y偏移offset-y，模糊半径blur-radius ，延伸半径spread-radius，和 color
这是据MDC的说法，-moz-box-shadow。
除了这5个属性值之外，还有一个属性值inset——表示内阴影。另外，这个属性值组还可以设置多组，中间用逗号隔开。
inset值在safari下不支持，这点我们之前就有所了解。除此之外，还有没有其他差异呢？
请看：-webkit-box-shadow。
原来safari下还不支持“延伸半径”值。

那么为了兼容safari，我们可以修改一下：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>skew</title>
	<style>
	.box {
		position: absolute;
		padding: 2px;
		background: white;
		-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		box-shadow: 1px 2px 4px rgba(0,0,0,.5);
	}
	.box img {
		display:block;
		width:200px;
		height:220px;
		border: 1px inset #8a4419;
		background:#eee;
	}
	.box:after {
		content: '';
		-webkit-box-shadow:  100px 0 10px rgba(0,0,0,.2);
		-moz-box-shadow:  100px 0 10px rgba(0,0,0,.2);
		box-shadow:  100px 0 10px rgba(0,0,0,.2);
		position: absolute;
		width: 50%;
		height: 80px;
		bottom: 0;
		right: 65px;
		z-index: -1;
		-webkit-transform: skew(-40deg);
		-moz-transform: skew(-40deg);
		-o-transform: skew(-40deg);
		transform: skew(-40deg);
	}
	</style>
</head>
<body>
<div class="box">
	<img src='http://www.cssass.com/blog/resource/avatar/avatar.jpg'/>
</div>
</body>
</html>

标签： CSS3, skew, transform
发布在 CSS3 | 一条评论 »

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

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, HTML5, Matrix, transform
发布在 HTML5 | 一条评论 »

笛卡尔情书的秘密——心形函数的绘制作者：ONEBOYS 发表时间： 2010年10月18号，星期一阅读：13,481 次

r=a(1-sinθ)
据说这是笛卡尔死前寄出的最后一封情书的内容，
这里面隐藏着一个刻骨铭心的秘密。。。
一生只为等待能手绘这个函数给我的人

借助canvas的arc方法，将此函数绘制如下：

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>Cardioid</title>
</head>
<body>
<canvas id="pad" width='800' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您：ie低版本用户请一边惭愧去吧，ie9可能需刷新。或者你试试访问<a href='http://www.wolframalpha.com/input/?i=r%3D100%281-sin%CE%B8%29'>这个网站</a></canvas>
<script type="text/javascript">
var $id=function(n){
	return document.getElementById(n) || n;
}
window.addEventListener("load",draw, false);
var con=$id("pad").getContext('2d');
	con.fillStyle='#f00'
	con.translate(300,100);
function draw(){
	var r=0 , a=100 , start = 0 , end= 0;
	con.rotate(Math.PI);
	for(var q=0; q<500; q++){
		start +=  Math.PI * 2 /500;
		end = start + Math.PI * 2 /500;
		r=a * (1-Math.sin(start));  //心形极坐标表示法
		con.arc(0,0,r,start,end,false);
}
con.fill();
}
</script>
</body>
</html>

如果使用bezierCurveTo方法，绘制各种曲线图形也不在话下，但那并不是通过心形函数本身绘制的。
关于心形线的一些资料
另，可以看下这篇文章：3D版心形函数的绘制

话说，极坐标公式是非常利于绘制图形的。
比如玫瑰线公式：r(θ) = a sin kθ
阿基米德螺线公式：r(θ) = a+bθ
都可以绘制如下：

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>Rose</title>
</head>
<body>
<canvas id="pad" width='800' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您：ie低版本用户请一边惭愧去吧，ie9可能需刷新</canvas>
<script type="text/javascript">
var $id=function(n){
	return document.getElementById(n) || n;
}
window.addEventListener("load",draw, false);
var con=$id("pad").getContext('2d');
	con.strokeStyle='#a00'
	con.translate(300,100);
function draw(){
	var r=0 , a=100 , start = 0 , end= 0 , k=4; //可以改变k值试试
	for(var q=0; q<500; q++){
		start +=  Math.PI * 2 /500;
		end = start + Math.PI * 2 /500;
		r =Math.abs(a *(Math.cos( k * start)))  //玫瑰线公式r(θ) = a sin kθ
		con.arc(0,0,r,start,end,false);
}
con.stroke();
}
</script>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>Archimedean spiral</title>
</head>
<body>
<canvas id="pad" width='800' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您：ie低版本用户请一边惭愧去吧，ie9可能需刷新</canvas>
<script type="text/javascript">
var $id=function(n){
	return document.getElementById(n) || n;
}
window.addEventListener("load",draw, false);
var con=$id("pad").getContext('2d');
	con.strokeStyle='#a00'
	con.translate(300,100);
function draw(){
	var r=0 , a=20 , start = 0 , end= 0 , k=2;
	for(var q=0; q<500; q++){
		start +=  Math.PI * 2 /100;
		end = start + Math.PI * 2 /100;
		r =a + k * start  //阿基米德螺线
		con.arc(0,0,r,start,end,false);
}
con.stroke();
}
</script>
</body>
</html>

另外，出于审美需求，我们的心型图形往往是这样的：
17(x^2+y^2)-16*abs(x)*y=225
但是这里所用到的坐标系是直角坐标系，我们需转换成极坐标方程，如下：
r=sqrt(225/(17-16sinθ*sqrt((cosθ)^2)))
最后，是我们的canvas大显身手的时候了：

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>LOVE</title>
</head>
<body>
<canvas id="pad" width='800' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您：ie低版本用户请一边惭愧去吧，ie9可能需刷新</canvas>
<script type="text/javascript">
var $id=function(n){
	return document.getElementById(n) || n;
}
window.addEventListener("load",draw, false);
var con=$id("pad").getContext('2d');
	con.fillStyle='#f00'
	con.translate(300,100);
function draw(){
	var r=0 , a=20 , start = 0 , end= 0;
	con.rotate(Math.PI);
	for(var q=0; q<1000; q++){
		start +=  Math.PI * 2 /1000;
		end = start + Math.PI * 2 /1000;
		r=a*Math.sqrt(225/(17-16*Math.sin(start)*Math.sqrt(Math.cos(start)*Math.cos(start))))
		con.arc(0,0,r,start,end,false);
}
con.fill();
}
</script>
</body>
</html>

标签： arc, Archimedean spiral, canvas, HTML5, Polar rose, 极坐标, 玫瑰线
发布在 HTML5 | 3 条评论 »

6 / 27« 首页...«4 567 8 »...尾页 »

姐姐的婚礼 作者：ONEBOYS 发表时间： 2010年11月19号，星期五 阅读：1,482 次

CSS3的崛起——体验webkit的3D-Effect 作者：ONEBOYS 发表时间： 2010年11月16号，星期二 阅读：3,322 次

纯css打造投影效果——CSS3属性transform的应用 作者：ONEBOYS 发表时间： 2010年11月3号，星期三 阅读：2,448 次

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

笛卡尔情书的秘密——心形函数的绘制 作者：ONEBOYS 发表时间： 2010年10月18号，星期一 阅读：13,481 次

姐姐的婚礼作者：ONEBOYS 发表时间： 2010年11月19号，星期五阅读：1,482 次

CSS3的崛起——体验webkit的3D-Effect 作者：ONEBOYS 发表时间： 2010年11月16号，星期二阅读：3,322 次

纯css打造投影效果——CSS3属性transform的应用作者：ONEBOYS 发表时间： 2010年11月3号，星期三阅读：2,448 次

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

笛卡尔情书的秘密——心形函数的绘制作者：ONEBOYS 发表时间： 2010年10月18号，星期一阅读：13,481 次