[SoOnPerson] HTML5 简单的动画

有了第一个粉丝呀！开心！

在学习动画的时候，有了一点小成果，开心，记录一下

不过不知道怎么能发动图，就不发结果了

文件 html5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="../../js/jquery.js"></script>
    <script src="../../js/html5.js"></script>
    <style>
        canvas
        {
            width: 19px;
            height: 9.3px;
            position:relative;
            background: linear-gradient(
                    rgba(255,0,0,0.3),
                    rgba(233, 219, 36, 0.3),
                    rgba(255, 252, 60, 0.3),
                    rgba(0,255,0,0.3),
                    rgba(0,255,255,0.3),
                    rgba(0,0,255,0.3),
                    rgba(128,0,255,0.3));
            transition: width 5s, height 5s, transform 5s;
            -webkit-transition: width 5s, height 5s, transform 5s;
        }

        canvas:hover
        {
            width:1900px;
            height: 930px;
        }




    </style>
</head>
<body onload="drawBackground();">
    <canvas id="background_canvas"></canvas>
</body>
</html>

这个是边学边尝试做出来的

如果不想要背景慢慢放大，可以不设置canvas里面的height和width，删了就可以

background的颜色是彩虹的几个颜色：红橙黄绿青蓝紫，都设置了透明度，不然感觉不太好看

html5.js自己注意一下引用路径，还有要在前面引用jquery.js

//屏幕的高度
var sc_height = screen.availHeight-110;
//屏幕的宽度
var sc_width = screen.availWidth-20;

var Mouse_x = 0;
var Mouse_y = 0;
//获取鼠标坐标
function mouseMove(ev)
{
    Ev= ev || window.event;
    var mousePos = mouseCoords(ev);
    Mouse_x = mousePos.x;
    Mouse_y = mousePos.y;
}
function mouseCoords(ev)
{
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return{
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}
document.onmousemove = mouseMove;
//设置背景
function drawBackground() {
    var cav = $("#background_canvas") ;
    //设置style里的宽高
    cav.css({"height": sc_height, "width": sc_width, "margin": 0});
    //设置属性宽高，这个不设置的话，图案会很模糊
    cav.attr("width",sc_width);
    cav.attr("height",sc_height);
    var cv = document.getElementById("background_canvas");
    var context = cv.getContext('2d');
   
    drawCircle(context);
}
//画圆
function drawCircle(context) {
    var t =1 ;
    var i = 0 ;
    var circle_speed = 6;

    window.setInterval(function () {
        context.clearRect(0,0,sc_width,sc_height);
        context.beginPath();
        //圆的边的宽度
        context.lineWidth = 8;
        //圆的边的颜色
        context.strokeStyle = 'red';
        context.arc(Mouse_x-10, Mouse_y-10, 50, ((circle_speed*i)-10)*Math.PI/180, circle_speed*i*Math.PI/180);
        context.stroke();
        i++;
    },t);
}

屏幕的宽度，有点问题，自己调了一点

主要思想就是获取一下鼠标的坐标，然后，一直刷新画一定角度的圆

主要是

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;

开始的角度和结束的角度，我设置的相差了10度，然后每刷新一次，就角度加一点。要注意是角度，不是数字，所以取了Math.PI/180 这个是一度，相当于单位啦

大概就这么多啦，画圆，可以看前面几个文章，有详细点的解释。

[SoOnPerson] HTML5 简单的动画

大概就是这个一直在转圈圈，随着你的鼠标动。

[SoOnPerson] HTML5 简单的动画

相关推荐