HTML5 canvas大风车动画转啊转

  • 一个纯正的HTML5页面效果,用IE浏览器图标模拟的大风车转啊转效果,不要以为IE图标是图片!!难度在于,里面的所有东西都不是图片,而是用canvas写的,你佩服我没有用,你应该佩服HTML5的canvas引擎,好好感谢它吧。
<!doctype html>
<html>
<head>
<meta charset=‘UTF-8‘ />
<title>宣化上谷战国红</title>
<style>
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;text-align:center;}
#middle{position:relative;z-index:2;width:750px;margin:0 auto;}
#middle canvas{position:relative;}
#bg{position:absolute;z-index:1;top:0;left:0;}
</style>
</head>
<body >
    <canvas id="bg"></canvas>
    <div id=‘middle‘></div>
</body>
<script type="text/javascript">
var G={}
G.$=function(n){
    return document.getElementById(n) || n;
}
G.scrW=function(){return document.body.offsetWidth;}
G.scrH=function(){return document.body.offsetHeight;}
function Pad(){
    var m=1, sign=1, lineWidth=3;
    this.init = function(o){
        this.create(o.name);
        this.S= o.size || 150; //pad尺寸
        this.radius = this.S/3; //logo半径
        this.posX = this.S/2; //logo原点位置
        this.posY = this.S/2;
        this.turn = o.turn || 8;    //补间时限
        this.con = G.$(o.name).getContext(‘2d‘);
        this.timeout = null;
        this.radi=this.con.createRadialGradient(-this.radius * 0.1,-this.radius * 0.2, this.radius * 0.5 , 0 , -this.radius * 0.1, this.radius *1.1);  //logo渐变
        this.radi.addColorStop(0, ‘rgba(126,226,253,1)‘);
        this.radi.addColorStop(0.6, ‘rgba(69,182,239,1)‘);
        this.radi.addColorStop(1, ‘rgba(20,133,211,1)‘);
        this.radi2= this.con.createLinearGradient(this.radius * 2.2 , this.radius * 0.2 , this.radius * 0.2 , this.radius * 2.2); //光环渐变
        this.radi2.addColorStop(0, ‘rgba(255,187,44,.9)‘);
        this.radi2.addColorStop(0.5, ‘rgba(255,242,102,.9)‘);
        this.radi2.addColorStop(1, ‘rgba(255,187,44,.9)‘);
        G.$(o.name).width=this.S;
        G.$(o.name).height=this.S;
        this.run();
    };
    this.create = function(n){ //创建canvas
        var temp=document.createElement(‘canvas‘);
        var that = this;
        temp.id=n;
        var bind=function(){
            clearTimeout(that.timeout);
            that.turn = 3;
            that.run();
        };
        var drag=function(){
            var o=this,e=arguments[0];
            var tX=parseInt(o.style.left) || 0,
                tY=parseInt(o.style.top) || 0,
                dx=e.clientX,
                dy=e.clientY;
            document.onmousemove=function(e){
                o.style.left=tX+e.clientX-dx+"px";
                o.style.top=tY+e.clientY-dy+"px";
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
        };
        temp.addEventListener("mousedown",drag,false); //拖动
        temp.addEventListener("mouseover",bind,false); //划过
        temp.addEventListener("touchstart",bind,false); //iOS触屏。(抱歉,由于本人没钱买iPad,还没测试过)
        G.$(‘middle‘).appendChild(temp);
    };
    this.run = function(){  //转动
        var that = this;
        var _slide=function(){
            var b=-1 ,t=0, c=2, d=that.turn;
            function _run(){
                if(t<d){ //半圈补间动画
                    t++;
                    m = - sign * easeInOut(t,b,c,d);
                    that.con.clearRect(0, 0, that.S, that.S);
                    that.drawLogo();
                    that.drawHalo();
                    that.timeout=setTimeout(_run, 10);
                }
                else{  //完成半圈
                    sign=-sign;
                    that.turn++;
                    that.timeout=setTimeout(_slide, 10);
                };
            };
            _run();
         };
        _slide();
    };
    this.drawLogo=function(){ //绘logo
        this.con.save();
        this.con.translate(this.posX,this.posY);
        if(m === 0) {m = 0.1;}
        this.con.scale(m, 1);
        this.con.beginPath();
        this.con.strokeStyle=‘#135b9f‘;
        this.con.fillStyle=this.radi;
        this.con.lineWidth=lineWidth;
        this.con.save();
        this.con.translate(0,-this.radius/8);
        this.con.moveTo(0,0);
        this.con.arc(0,0, this.radius/2 ,0,Math.PI*2/2,true);
        this.con.lineTo(0,0);
        this.con.restore();
        this.con.save();
        this.con.translate(0,this.radius/8);
        this.con.moveTo(this.radius,0);
        this.con.lineTo(-this.radius/2,0)
        this.con.arc(0, 0, this.radius/2 ,Math.PI*2/2,Math.PI*4/24,true);
        var y1=this.radius/2 * Math.sin(Math.PI*4/24) ;
        var x1=Math.sqrt(Math.pow(this.radius,2) - Math.pow(y1+ this.radius/8,2));
        this.con.lineTo(x1,y1);
        this.con.restore();
        var ang1=Math.asin(this.radius/8/this.radius);
        var ang2=Math.acos(x1/this.radius);
        this.con.arc(0, 0, this.radius, ang2, ang1, false);
        this.con.stroke();
        this.con.fill();
        this.con.restore();
    };
    this.drawHalo = function(){  //绘光环
        this.con.save();
        this.con.fillStyle=this.radi2;
        this.con.beginPath();
        this.con.translate(this.posX,this.posY);
        var n=this.radius/105;
        this.con.moveTo(90 * n,-70 * n);
        this.con.bezierCurveTo(125 * n,-202* n,-140* n,-65* n,-128* n,87* n);
        this.con.bezierCurveTo(-125* n,105* n,-105* n,115* n,-60* n,88* n);
        this.con.bezierCurveTo(-59* n,79* n,-108* n,118* n,-114* n,78* n);
        this.con.bezierCurveTo(-115* n,-33* n,117* n,-183* n,88* n,-70* n);
        this.con.fill();
        this.con.restore();
    };
};
var drawBg=function(){ //绘背景
    var bg=G.$("bg").getContext(‘2d‘);
    G.$(‘bg‘).width=G.scrW() ;
    G.$(‘bg‘).height=G.scrH() ;
    var lineBg = bg.createLinearGradient(1000,0,0,800);
    lineBg.addColorStop(0,‘#98ff5a‘);
    lineBg.addColorStop(0.4,‘#64dbc5‘);
    lineBg.addColorStop(0.8,‘#00b8fe‘);
    lineBg.addColorStop(1,‘#0034bb‘);
    bg.save();
    bg.fillStyle=lineBg;
    bg.fillRect(0,0,G.scrW(),G.scrH());
    bg.fillStyle=‘#fff‘;
    bg.transform(-1,0,0,1,G.scrW(),0);
    for (var i=20;i>0;i--){
      bg.beginPath();
      bg.scale(1,0.95);
        if(i % 2 === 0){bg.globalAlpha = 0.05;}
        else{bg.globalAlpha = 0.03;}
      bg.arc(i*i*1.2 ,200 + i*5, 80+i*i, 0, Math.PI*2, true);
      bg.fill();
    }
    bg.restore();
}
function easeInOut(t,b,c,d){ //补间算法
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
}
window.onload=function(){
    drawBg();
    var max=20;
    //var size=Math.max(G.scrW()/Math.sqrt(max),G.scrH()/Math.sqrt(max));
    for(var i=0 ; i<max; i++ ){
        new Pad().init({name:‘pad‘+i, turn: i+5});
    }
};
window.onresize=function(){drawBg();}
</script>
</html>

HTML5 canvas大风车动画转啊转

时间: 2024-10-15 05:12:38

HTML5 canvas大风车动画转啊转的相关文章

HTML5 Canvas 图像动画的实现(实例小球弹跳)

Canvas 中 clearRect 清除函数 var c=document.getElementById("php100"); var p100=c.getContext("2d"); p100.clearRect(x,y,x,y) // 擦除画布一个区域x-y.x-y ------ 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <

8个经典炫酷的HTML5 Canvas动画欣赏

HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮助. 1.HTML5 Canvas可拖动的弹性大树摇摆动画 今天让我们继续来分享一个炫酷的HTML5动画,它是一款基于HTML5 Canvas的大树摇摆动画,这款HTML5动画的特点是我们可以拖拽树枝,从而让整棵树摇摆起来,这样就真实地模拟了大树从摇摆到静止的整个过程,相当逼真. 在线演示     

7个惊艳的HTML5 Canvas动画效果及源码

HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来看看. 1.HTML5 Canvas瀑布动画 超逼真 这是一个很逼真的HTML5瀑布动画,基于Canvas实现的,效果相当酷. 在线演示   /   源码下载 2.HTML5 Canvas彩色像素进度条动画 这也是一款基于HTML5 Canvas的动画特效,它是一个很有创意的HTML5进度条,大家可

前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内附有时钟效果代码 demo 下载地址,感兴趣的小伙伴们可以收藏一下. 1 超绚丽的 HTML5 地图分布动画 这是一款基于 HTML5 的地图应用,但它不同的地方在于它主要是在地图上实现分布动画,可以利用这款插件实现各个地区之间的客流流向,给人非常直观的数据展现. 2 鼠标滑过粒子挤压动画 粒子动画

html5 canvas首屏自适应背景动画循环效果代码

模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大家积极评论,给出宝贵意见 下 载 演示地址 本文地址:html5 canvas首屏自适应背景动画循环效果代码

HTML5 Canvas 梦幻的文字飞扬动画教程

之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览   源码下载 实现代码如下: html代码: <div class="dg ac"> <div class="dg main a taller-than-window" style="width: 245px;"> <div style="widt

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8

第6章 精灵 精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器解耦).命令模式(精灵的动作).享元模式(一个实例表示多个精灵) painter属性是一个指向Painter对象的引用,使用paint(sprite,context)方法来绘制精灵,behaviors属性指向一个对象数组,数组中每个对象都会以execute(sprite,context,time)方

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5

文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:start(默认) center end left right,当canvas元素的dir属性是ltr时,left效果与start相同,right与end相同,如果dir属性是rtl,则相反 textBaseline:top bottom middle alphabetic(默认,基于拉丁字母) id

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4

CanvasRenderingContext2D对象中用于平移.旋转坐标系的方法 镜像 scale(1,-1)绘制垂直镜像:scale(-1,1)绘制水平镜像 自定义的坐标变换 transform(),多次调用会叠加效果 setTransform(),每次调用都会清除上次的效果 两个方法都用于旋转.缩放.及平移坐标系(可以根据公式传入0或其他数据) x'=ax+cy+e y'=bx+dy+f 坐标系旋转公式(angle弧度) x'=x×cos(angle)-(y×sin(angle)) y'=y