井井客

搜索

自己练习canvas画的太极图

昨天看视频的时候无意中看到这图,感觉满有意思的,所以自己练习画了一下,好像还满简单的~

自己练习canvas画的太极图

用canvas画的,下次可以自己练习去试试SVG~

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自己练习canvas画的太极图</title>
<style>
@-webkit-keyframes rotate {0%{transform:rotate(0deg);}100%{transform:rotate(180deg);}}
@keyframes rotate {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
#Roll {-webkit-animation:rotate 5s linear infinite; animation:rotate 5s linear infinite;}
</style>
</head>
<body>
<canvas id="Roll" width="400px" height="400px">太极图</canvas>
<script>
	var ele = document.getElementById('Roll'),
		ctx = ele.getContext('2d');
	//画外面的大图区域	
	ctx.beginPath();
	ctx.arc(200,200,200,0,Math.PI*2 ,true);
	ctx.strokeStyle='LightGrey';
	ctx.stroke();
	ctx.fillStyle ="white";
	ctx.fill();
	//画个半圆做黑色背景
	ctx.beginPath();
	ctx.arc(200,200,200,Math.PI*0.5,Math.PI*1.5,true);
	ctx.fillStyle ="black";
	ctx.fill();
	//上部画个黑色圆
	ctx.beginPath();
	ctx.arc(200,100,100,0,Math.PI*2,true);
	ctx.fillStyle ="black";
	ctx.fill();
	//上部画个黑色圆
	ctx.beginPath();
	ctx.arc(200,300,100,0,Math.PI*2,true);
	ctx.fillStyle ="white";
	ctx.fill();
	//上部画个白色鱼眼
	ctx.beginPath();
	ctx.arc(200,100,25,0,Math.PI*2,true);
	ctx.fillStyle ="white";
	ctx.fill();
	//上部画个黑色鱼眼
	ctx.beginPath();
	ctx.arc(200,300,25,0,Math.PI*2,true);
	ctx.fillStyle ="black";
	ctx.fill();
</script>
</body>
</html>

相应的地方都有备注,欢迎指正~

文章TAG:HTML5,canvas

作者:井井客整理来源:未知
本文标题:自己练习canvas画的太极图
本文链接:/c/14143.html

上一篇:大家都在说的AJAX三种跨域方法
下一篇:Bash命令(文件目录操作)及快捷键整理

文章分类

相关阅读

随便看看