当前位置: 首页 > 前端笔记 > JAVASCRIPTS > Canvas绘制八卦图形,并让八卦动起来
2014年14八月

Canvas绘制八卦图形,并让八卦动起来

这个是学习的Canvas的终结笔记了,貌似能画出了一个比较复杂的图像,但是好像有细节不好,八卦在转动的时候,竟然出现了一条线,不知道怎么弄掉,而且边缘的切合很毛糙,同样大小的园竟然不能完全重叠。但是canvas确实挺好的。啥时候能和PS一样了,估计就风靡起来了。

废话不多说,首先来看八卦怎么画,如下图:

先看看八卦图怎么画.png

再来看代码怎么写,下面的代码是动起来的效果,draw()就是画八卦的方法,下面有2个演示地址,一个是动的,一个是不动的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制八卦图形,并让八卦动起来</title>
<style>
#trigram { width:600px; height:500px; border:1px #dddddd solid; display:block; margin:100px auto; background:#f8f8f8; padding:0; }
</style>
</head>

<body>
<canvas id="trigram" width="600" height="500">
<p>你的浏览器不支持HTML5 Canvas,请升级你的浏览器或者更换其他浏览器!</p>
</canvas>
<script>
var canvas = document.getElementById("trigram");
var context = canvas.getContext("2d");
var draw = function(x, y){ //x, y为偏移值,原来原点左上角(0,0),现在移动到了最中心(300, 250)

	if(!x){
		x = 0; 
	}
	if(!y){
		y = 0; 
	}
	
	context.clearRect(x, y, 600, 500); //清除画布内容
	
	//先画阴(就是一个大圆)
	context.beginPath();
	context.arc(300+x, 250+y, 180, 0, Math.PI*2); //arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
	context.closePath();
	context.fillStyle = '#3b3b3b'; //填充颜色
	context.fill();
	
	//再画阳
	context.beginPath();
	context.arc(300+x, 250+y, 180, 0.5*Math.PI, Math.PI*1.5); //先画大的左半圆
	context.closePath();
	context.fillStyle = '#ffffff';
	context.fill();
	
	context.beginPath();
	context.arc(300+x, 160+y, 90, 0.5*Math.PI, Math.PI*1.5) //上半部小圆
	context.closePath();
	context.fillStyle = '#3b3b3b';
	context.fill();
	
	context.beginPath();
	context.arc(300+x, 340+y, 90, 1.5*Math.PI, Math.PI*0.5) //下半部小圆
	context.closePath();
	context.fillStyle = '#ffffff';
	context.fill();
	
	//画阴极
	context.beginPath();
	context.arc(300+x, 340+y, 16, 0, Math.PI*2); 
	context.closePath();
	context.fillStyle = '#3b3b3b'; //填充颜色
	context.fill();
	
	//画阳极
	context.beginPath();
	context.arc(300+x, 160+y, 16, 0, Math.PI*2);
	context.closePath();
	context.fillStyle = '#ffffff'; //填充颜色
	context.fill();
};
var rotateAct = function(){
	context.rotate((Math.PI/180)*32);
	draw(-300, -250);
	play();
};
var play = function(){
	setTimeout(rotateAct, 80);
};
context.translate(300, 250); //将原点移动到画布的中心
play();
</script>
</body>
</html>

在线演示地址: Canvas绘制八卦.html         Canvas绘制八卦图形,并让八卦动起来.html

新增了一篇文章: CSS3绘制运动的八卦图形-貌似比canvas简单、流畅.html

文章信息

  • 发布日期:2014年08月14日 16:15:32
  • 固定地址:http://www.estorm.cn/notes/javascripts/2014-08-14/canvas-trigram.html