[SoOnPerson]HTML5 画布实现动画效果

最新推荐文章于 2022-04-18 18:02:57 发布

SoOnPerson

最新推荐文章于 2022-04-18 18:02:57 发布

阅读量546

点赞数 1

分类专栏： idea html5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_35793301/article/details/79802896

版权

idea 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html5

4 篇文章 0 订阅

订阅专栏

<%--
  User: SoOnPerson
  Date: 2018/4/2
  Time: 17:37
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Loving Heart</title>
    <%--引入样式--%>
    <link rel="stylesheet" href="../../css/LovingHeart.css">
    <%--引入js--%>
    <script src="../../js/jquery.js"></script>
    <script src="../../js/LovingHeart.js"></script>
</head>
<body οnlοad="draw();">
    <canvas id="background_block_web">

    </canvas>
</body>
</html>

//屏幕的高度
var sc_height = screen.availHeight;
//屏幕的宽度
var sc_width = screen.availWidth;
//初始的xy
var A_x = 0;
var A_y = 0;
//xy方向的速度
var speed_x = 3;
var speed_y = 2;
function draw() {
    //jq获取元素
    var cav = $("#background_block_web");
    //设置style里的宽高
    cav.css({"height": sc_height, "width": sc_width, "margin": 0});
    //设置属性宽高，这个不设置的话，图案会很模糊
    cav.attr("width",sc_width);
    cav.attr("height",sc_height);

    //每隔一段时间执行一次，实现动态效果必备
    window.setInterval(function () {
        //原生获取元素，通过jq获取的好像不可以
        var cv = document.getElementById("background_block_web");
        //获取上下文对象2d,具体我也不太懂
        var context = cv.getContext('2d');
        //黑色的填充色，圆球的填充色
        context.fillStyle = 'black';
        //开始
        context.beginPath();
        //圆的边的颜色
        context.strokeStyle = 'red';
        //圆的 x,y,大小，起始角度，结束角度360度，也就是一圈，因为pi是180度
        context.arc(A_x,A_y,15,0,2*Math.PI);
        //填充上面的黑色
        context.fill();
        //画
        context.stroke();

        //x方向的速度
        A_x += speed_x;
        //y方向的速度
        A_y += speed_y;

        //去判断一下是不是到边界了
        isEdge();
            /*clearInterval(interv);*/

    },10);
}
function isEdge() {
    //当现在球的位置超出了屏幕的最大宽度，或者小于0
    if (sc_width < A_x || A_x <0){
        //改变横向的方向，但是不改变速度
        speed_x=(-speed_x);
    }
    //当现在球的位置超出了屏幕的最大高度，或者小于0
    //但是获取到的最大高度和实际的有误差，所以要修正一点，自己看着改
    if (sc_height < (A_y+120) || A_y<0){
        //改变竖向的方向，但是不改变速度
        speed_y= (-speed_y);
    }
}

补充一下：如果不行要轨迹的话。在js中加一段代码就可以了。

SoOnPerson

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
[SoOnPerson]HTML5 画布实现动画效果

&lt;%-- User: SoOnPerson Date: 2018/4/2 Time: 17:37 Description:--%&gt;&lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt;&lt;!DOCTYPE html&gt;&lt;html lang="en"&
复制链接

扫一扫