【HTML5】一起学习canvas【一】-创新互联

额，开始写之前依旧给大家问个好。【HTML5】一起学习canvas【一】

目前创新互联已为超过千家的企业提供了网站建设、域名、网站空间、网站托管、服务器租用、企业网站设计、东海网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

这次的话，就简单地写写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是指每层圆的数目。

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

附件：http://down.51cto.com/data/2364276

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：【HTML5】一起学习canvas【一】-创新互联
分享地址：https://www.cdcxhl.com/article34/csccpe.html

成都网站建设公司_创新互联，为您提供自适应网站、响应式网站、定制网站、定制开发、标签优化、品牌网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站托管运营

域名注册知识

各行业网站