利用HTML5实现Canvas飞机线条动画特效



6 23 8



特效描述:利用HTML5实现 Canvas 飞机线条 动画特效,利用HTML5实现Canvas飞机线条动画特效

代码结构

1. HTML代码

<h1 class="txtshadow">airplane</h1>
<div id="canvas-container" >
    <canvas id="sineCanvas"  width="1024" height="300"></canvas>
</div>
<script>
(function () {
    var unit= 50,canvas, context, canvas2, context2,
        height, width, xAxis, yAxis,
        draw;
    /**
     * Init function.Initialize variables and begin the animation.
     */
    function init() {
        canvas = document.getElementById("sineCanvas");
        context = canvas.getContext("2d");
        height = canvas.height;
        width = canvas.width;
        xAxis = Math.floor(height / 2);
        yAxis = Math.floor(width / 4);
        context.save();
        draw();
    }
    /**
     * Draw animation function.
     * 
     * This function draws one frame of the animation, waits 25ms, and then calls
     * itself again.
     */
    draw = function () {
        // Clear the canvas
        context.clearRect(0, 0, width, height);
        // BLUE gradient
        grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000);
        grd.addColorStop(0, 'rgba(189, 106, 155, 1.000)');
        grd.addColorStop(1, 'rgba(189, 106, 155, 0.00)');
        context.strokeStyle = grd;
        context.lineWidth = 2;
        // BLUE sine
        context.beginPath();
        drawSine(draw.t, unit, 0, 1);
        context.stroke();
        //BLUE plane
        drawPlane(draw.t, unit, 0, 1);
        //GREEN gradient
        grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000);
        grd.addColorStop(0, 'rgba(151, 204, 18, 1.000)');
        grd.addColorStop(1, 'rgba(151, 204, 18, 0.000)');
        context.strokeStyle = grd;
        // GREEN sine
        context.beginPath();
        drawSine(draw.t, unit*2, 50, -1);
        context.stroke();
        // GREEN plane
        drawPlane(draw.t, unit*2, 50, -1 );
        //YELLOW Gradient
        grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000);
        grd.addColorStop(0,  'rgba(245, 223, 22, 1.000)');
        grd.addColorStop(1, 'rgba(245, 223, 22, 0.0)');
        context.strokeStyle = grd;
        //YELLOW sine
        context.beginPath();
        drawSine(draw.t, unit*2, 100, 1);
        context.stroke();
        //YELLOW plane
        drawPlane(draw.t, unit*2, 100, 1 );
        //RED Gradient
        grd = context.createLinearGradient(0.000, 0.000, 800.000, 0.000);
        grd.addColorStop(0,  'rgba(204, 63, 24, 1.000)');
        grd.addColorStop(1, 'rgba(204, 63, 24, 0.000)');
        context.strokeStyle = grd;
        //RED sine
        context.beginPath();
        drawSine(draw.t, unit*1/150, 150, -1);
        context.stroke();
        //RED plane
        drawPlane(draw.t, unit*1/150, 150, -1 );
        // Restore original styles
        context.restore();
        // Update the time and draw again
        draw.seconds = draw.seconds - .007;
        draw.t = draw.seconds * Math.PI;
        setTimeout(draw , 35);
    };
    draw.seconds = 0;
    draw.t = 0;
    /**
     * Function to draw sine
     * 
     * The sine curve is drawn in 10px segments starting at the origin. 
     */
    function drawSine(t, unitval, offset, direction) {
        // Loop to draw segments
        for (i = yAxis; i <= width; i += 10) {
            x = t + (-yAxis + i) / unitval;
            y = Math.sin(x) * direction;
            context.lineTo(i + offset , (unitval / 3) * y + xAxis);
        }
    }
    /**
     * Function to draw arrow
     */
    function drawPlane(t, unitVal, offset, direction) {
        // Cache position of arrow on the circle
        var y = xAxis + (unitVal / 3) * Math.sin(t) * direction;
        var img = new Image();
        img.src = "img/LsYmdkL.png";
        //img.src = "https://i.imgur.com/bYuAw4C.png";
        // Draw yAxis bead
        context.beginPath();
        context.drawImage(img, yAxis - 29  + offset , y - 16 );
        //context.arc(yAxis, y, 5, 0, 2*Math.PI, false);
        context.stroke();
    }
    init();
})();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5线条动画 html5线条动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到