HTML5 Canvas 八星聚义动态效果

简介:

昔有石碣村七星聚义,今有Canvas八星聚义。动态效果是,八颗星以等速螺线慢慢向中心聚集,最后汇聚成一颗。

效果:

代码:

复制代码
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>八星聚义</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){
        var canvas=document.getElementById('myCanvus');
        canvas.height=400;
        canvas.width=400;
        var context=canvas.getContext('2d');

        context.translate(200,200);// 原点移到中央

        if(distance>0){
            setInterval(function(){ run(context); }, 50);
        }
};

var delta=0;// 角度
var distance=200;// 与圆心的举例

function run(context){
        context.clearRect(-200,-200,400,400);// 清除图案

        context.strokeStyle = "black";

        // 横轴
        context.beginPath();
        context.moveTo(-200, 0);
        context.lineTo(200,0);
        context.stroke();
        context.closePath();

       // 纵轴
        context.beginPath();
        context.moveTo(0, 200);
        context.lineTo(0,-200);
        context.stroke();
        context.closePath();

        // 大圈
        context.strokeStyle='black';
        context.beginPath();
        context.arc(0,0,200,0,2*Math.PI,false);
        context.closePath();
        context.stroke();

        // 小圈
        context.strokeStyle='black';
        context.beginPath();
        context.arc(0,0,100,0,2*Math.PI,false);
        context.closePath();
        context.stroke();

        if(distance>0){
            delta+=1;// 角度每次加十
            distance-=0.4;// 举例每次减去十


            for(var i=0;i<8;i++){
                context.save();

                context.rotate(getRad(i*45));
                context.translate(distance*Math.sin(getRad(delta)),distance*Math.cos(getRad(delta)));

                context.save();
                context.rotate(getRad(-i*45));
                drawFiveStar(context,0,0,6,getColor(i));
                context.restore();

                context.restore();
            }

        }else{
            distance=0;
            delta=0;

            context.save();
            context.translate(distance*Math.sin(getRad(delta)),distance*Math.cos(getRad(delta)));

            drawFiveStar(context,0,0,6,'black');

            context.restore();
        }
}

// 角度得到弧度
function getRad(degree){
        return degree/180*Math.PI;
}

// 得到颜色
function getColor(index){
    if(index==0){
        return "red";
    }else if(index==1){
        return "navy";
    }else if(index==2){
        return "green";
    }else if(index==3){
        return "yellow";
    }else if(index==4){
        return "pink";
    }else if(index==5){
        return "orange";
    }else if(index==6){
        return "olive";
    }else if(index==7){
        return "rose";
    }
}

// 绘制五角星,多角星都可以由这个方法变化而来
function drawFiveStar(context,x,y,r,color){
    context.strokeStyle = color;
    context.fillStyle = color;

    context.translate(x,y);
    
    for(var i=0;i<5;i++){
        context.save();
        context.rotate(getRad(360/5*i));

        context.beginPath();
        context.moveTo(0, -r);
        context.lineTo(-Math.tan(getRad(18))*r, 0);
        context.lineTo(Math.tan(getRad(18))*r,0);
        context.lineTo(0, -r);
        context.fill();
        context.stroke();
        context.closePath();    
        context.restore();
    }        
}

//-->
</script>
复制代码

 














本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7476024.html,如需转载请自行联系原作者


相关文章
|
11天前
|
前端开发 JavaScript API
2024 新年HTML5+Canvas制作3D烟花特效(附源码)
2024 新年HTML5+Canvas制作3D烟花特效(附源码)
63 0
|
8月前
|
移动开发 前端开发 Shell
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
|
8月前
|
前端开发 JavaScript
HTML+CSS+JS仿京东购物车页面动态效果
HTML+CSS+JS仿京东购物车页面动态效果
105 0
|
11天前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
52 0
|
11天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
19 4
|
11天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
17 1
HTML5 Canvas发光Loading源码
|
11天前
|
移动开发 前端开发 HTML5
Canvas实现超酷Loading动画HTML代码
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
15 1
Canvas实现超酷Loading动画HTML代码
|
11天前
|
移动开发 HTML5
高大上HTML5引导页源码 动态效果更好看
高大上HTML5引导页源码 动态效果更好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,
23 0
高大上HTML5引导页源码 动态效果更好看
|
11天前
|
移动开发 HTML5
超级高大上HTML5引导页源码 动态效果更好看
超级高大上HTML5引导页源码 动态效果更好看
41 3
超级高大上HTML5引导页源码 动态效果更好看
|
11天前
使用html实现动态效果
使用html实现动态效果