额,开始写之前依旧给大家问个好。j_0002.gif

这次的话,就简单地写写canvas有关的文了,说实在的,我正式接触html5也不是很久,所以此文就当做是一个学习的过程了,希望能对跟我一样在学html5的童鞋有点帮助。


对于canvas,没接触过的童鞋请自行脑补。。或者百度,这里就不多做介绍,而且本次编写用到的技术都是最基本的,所以有点基础的都应该能看懂。


我是效果演示,请戳我←_ ←!!


1.HTML和CSS准备

<! DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET = 'UTF-8'>
<TITLE>ROTATE CIRCLR</TITLE>
    <style type='text/css' rel='stylesheet'>
        body{
            margin: 0px;
        }
        #canvas{
            background:#dddddd;
            margin: 0px;
        }
    </style>
    <script type='text/javascript' src='js/jquery.js'></script>
</HEAD>
<BODY>
    <canvas id='canvas' width="1366" height="576">
        CANVAS CANNOT SUPPORTED!
    </canvas>
</BODY>
</HTML>


2,JS编写


、    

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//参数定义
var CircleRadius = 10,                                      //小圆的半径
    RGB,                                                    //颜色
    Angle,                                                  //角度
//计数器
    NumOfSmallCircle=7,                                 //最里层小圆的数量
    NumOfRing=6,                                            //圆形环数
    AngleChangeSize = 0,                                    //角度转动的程度
    Direction,                                              //圆圈转的方向,1为顺时针,-1为逆时针
    PathRadius = (CircleRadius*2+1)/2/(Math.sin(Math.PI*2/NumOfSmallCircle/2));//轨迹半径计算(因为考虑到轨迹上任意两圆的圆心到大圆的圆心距离相等,所以三点
//可以构成一个等腰三角形,我们再根据等腰三角形求边长的公式计算)
function DrawCircle(AngleChange){
    for(var i=1;i<=NumOfRing;i++)
    {
        //用于图片旋转方向的判定设置
        if(i%2==1)
        {
            Direction=1;
        } else {
            Direction=-1;
        }
        RGB = Math.floor(Math.random()*255);
        for(var j=1;j<=NumOfSmallCircle*i;j++)
        {
            //计算角度
            Angle = (Math.PI*2/NumOfSmallCircle/i*j)+(Math.PI*2/360*AngleChange*Direction);
            context.beginPath();
            //绘制小圆位置
            context.arc(canvas.width/2+PathRadius*(i)*Math.cos(Angle),canvas.height/2+PathRadius*(i)*Math.sin(Angle),CircleRadius,0,Math.PI*2,true);
            //设置变化的RGB值
            context.fillStyle = 'rgb('+RGB+','+Math.floor(RGB/4)+','+(255-RGB)+')';
            context.fill();
        }
    }
}
function Draw(){
    //擦除上次的画圆结果,使得小圆的变化看起来是动态的
    //如果不懂的话,注释掉下面一行,再看效果
    context.clearRect(0,0,canvas.width,canvas.height);
    //用于滚动设置
    AngleChangeSize==360?AngleChangeSize=0:AngleChangeSize++;
    DrawCircle(AngleChangeSize);
}
var LOOP = setInterval('Draw()',150);

其实这个的原理简单来讲就是:变换位置画圆,而变换的规则是按另一个圆的轨迹来进行的。也就是说,小圆的所有圆心都在大圆的轨迹上。 它由一个时间函数来控制,使得小圆(马猴烧酒)的位置随时间不停变化,并在旋转一周后将滚动值置零,循环画圆。 本例中每层圆的数目都是以倍数增加的,这个每层增加的圆的计算方法可以自己去设置,这里只是提供演示。至于角度的变化方法 是 用 Math.PI*2/N 这里N是指每层圆的数目。


里面的一些参数是可以自己改的,大家有什么想法欢迎来交流。。