使用html5 canvas 画一台小单车动画

最新推荐文章于 2021-06-26 16:48:16 发布

noonnightstorm

最新推荐文章于 2021-06-26 16:48:16 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/noonnightstorm/article/details/8154622

版权

       最近一直在搞前端，不过没用过canvas，呵呵！就想试一下，也刚刚好我图形学的作业就是做一台小单车动画（不限语言），所以我就在一个蛋疼的下午写了一台很蛋疼的单车了，呵呵！样子很丑，不过可以美化，大家可以参考参考！高手勿进虐我这小菜菜，菜鸟共同分享也可以参考当课堂作业，呵呵！

       废话不说，先看代码:

      HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <link rel="stylesheet" href="../css/text.css" />
    <script type="text/javascript" src="../js/canvas.js"></script>
</head>
<body>
    <canvas class="mycanvas" id="mycanvas">
    </canvas>
    <button οnclick="start()">神啊！赐予我小单车神奇的力量吧!</button>
</body>
</html>

CSS:

#mycanvas{
    width: 1300px;
    height: 700px;
    background-color: #d1fffe;
    border: 1px solid #000;
}

JS:

var model;
var bike;
var incremental=0;
var timer;

if(!model)
model={};
model.create = function(){};
model.create.prototype = {
    cxt : null,
    canvas : null,
    init: function (){
        canvas = document.getElementById("mycanvas");
        canvas.width = 1300;
        canvas.height = 700;
        cxt = canvas.getContext("2d");
    },
    drawLine : function (x1,y1,x2,y2){
        cxt.beginPath();
        cxt.moveTo(x1,y1);
        cxt.lineTo(x2,y2);
        cxt.closePath();
        cxt.stroke();
    },
    drawCircle : function (centerX, centerY, radius){
        cxt.beginPath();
        cxt.strokeStyle = "rgb(0,0,0)";
        cxt.arc(centerX,centerY,radius,0,Math.PI*2,false);
        cxt.closePath();
        cxt.stroke();
    },
    drawRect : function (x,y,width,height){
        cxt.beginPath();
        cxt.strokeStyle = "rgb(0,0,0)";
        cxt.strokeRect(x,y,width,height);
        cxt.closePath();
        cxt.stroke();
    },
    clearCanvas : function (){
        cxt.fill();
        cxt.clearRect(0,0,1300,700);
    }
};

window.onload = function (){
    bike = new model.create();
    bike.init();
    //先初始化一辆单车
    draw();
}

function start(){
    timer = setInterval("draw()",100);
}

function draw(){
    //先清除canvas
    bike.clearCanvas();
    //第1部分
    bike.drawLine(980+incremental,280,930+incremental,380);
    //第2部分
    bike.drawLine(955+incremental,330,990+incremental,370);
    //第3部分
    bike.drawLine(990+incremental,370,990+incremental,420);
    //第4部分
    bike.drawLine(990+incremental,420,950+incremental,500);
    //第5部分
    bike.drawCircle(950+incremental,500,50);
    //第6部分
    bike.drawLine(990+incremental,395,1200+incremental,395);
    //第7部分
    bike.drawLine(1080+incremental,370,1080+incremental,395);
    //第8部分
    bike.drawRect(1040+incremental,355,80,15);
    //第9部分
    bike.drawLine(1150+incremental,395,1200+incremental,500);
    //第10部分
    bike.drawCircle(1200+incremental,500,50);
    //第11部分
    bike.drawRect(1200+incremental,387,60,15);

    //k约等于25根号2，稍微用圆的方程算算就OK
    var k = 35.3;

    //第12,13,14,15部分
    if(incremental%2==0){
        //第12部分
        bike.drawLine(950+incremental,450,950+incremental,550);
        //第13部分
        bike.drawLine(900+incremental,500,1000+incremental,500);
        //第14部分
        bike.drawLine(1200+incremental,450,1200+incremental,550);
        //第15部分
        bike.drawLine(1150+incremental,500,1250+incremental,500);
    }
    else{
        //第12部分
        bike.drawLine(950+incremental-k,500-k,950+incremental+k,500+k);
        //第13部分
        bike.drawLine(950+incremental+k,500-k,950+incremental-k,500+k);
        //第14部分
        bike.drawLine(1200+incremental-k,500-k,1200+incremental+k,500+k);
        //第15部分
        bike.drawLine(1200+incremental+k,500-k,1200+incremental-k,500+k);
    }

    incremental = incremental-5;
    if(incremental<-650)
        clearInterval(timer);
}

       步骤:

       1.先封装好一个model的类，里面有各种画图的方法

       2:然后onload的时候调用draw()初始化一台单车

       3:当按下按钮的时候出发start()触发动画效果

       4:其实动画效果就是在x轴上平移，然后4条车轮轴在交替出现，形成在运动的过程而已

呵呵，是不是很简单，当你空虚寂寞难耐又无聊的时候，不妨也可以写点东西打发下时间，呵呵！看看效果图吧！