额，开始写之前依旧给大家问个好。
这次的话，就简单地写写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 = ElementById('canvas');
var context = Context('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)*s(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是指每层圆的数目。
里面的一些参数是可以自己改的，大家有什么想法欢迎来交流。。
转载于:
本文发布于:2024-01-30 18:59:15，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170661235622148.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
