【canvas】基本示例——追逐赛动画的实现-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas base</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            position: relative;
            background-color: #1c96ae;
        }
        #cvs{
            position: relative;
            display: block;
            left: 300px;
            background-color: rgba(0,0,0,0);
        }

    </style>
</head>
<body>

<div id="container">
    <canvas id="cvs"></canvas>
</div>

<button id="player1">玩家1前进</button>
<button id="player2">玩家2前进</button>


<script>

    var canvas = document.getElementById('cvs');
    canvas.width = 200;
    canvas.height = 200;
    var ctx = canvas.getContext('2d');

    console.log(ctx.fillStyle); //#000000
    console.log(ctx.strokeStyle); //#000000
    console.log(ctx.shadowColor); //rgba(0,0,0,0)
    console.log(ctx.shadowBlur);  //0
    console.log(ctx.shadowOffsetX); //0
    console.log(ctx.shadowOffsetY);  //0


    console.log(ctx.lineCap);   //butt
    console.log(ctx.lineJoin);   //miter
    console.log(ctx.lineWidth);   //1
    console.log(ctx.miterLimit);   //10







    var pos1 = 3, pos2 = 7;
    var score1 = 0, score2 = 0;
    var isGameOver = false;
    var t1,t2;
    function checkGameOver(){
        if(pos1 === pos2){
            if(score1>score2){
                alert('玩家 1 赢');
            }
            else{
                alert('玩家 2 赢');
            }
            isGameOver = true;
        }
    }
    function mod8(n) {
        return (8+n)%8;
    }

    var current,end,user;
    function setCurrentEnd(n) {
        current = mod8(n + 1);
        current = current===0?8:current;
        end = n;
    }
    function draw(){

        // 每次绘制前先清屏
        ctx.clearRect(0,0,200,200);

        // 初始样式
        ctx.strokeStyle = 'rgb(237,230,218)';
        ctx.lineWidth = 20;
        ctx.shadowBlur=0;

        // 画整个圆弧
        ctx.beginPath();
        ctx.arc(100, 100, 90, 0, Math.PI*2, false);
        ctx.stroke();


        ctx.lineCap = 'round';
        ctx.shadowBlur=1;
        ctx.shadowColor="black";


        //画6个 1/8 圆弧
        for(var i=0;i<7;i++){
            if(i===3){
                continue;
            }
            ctx.beginPath();
            ctx.arc(100, 100, 90, Math.PI * (i/4), Math.PI * ((i+1)/4), false);
            ctx.stroke();
        }


        // 玩家变量

        // 玩家1
        function draw1(c){
            ctx.strokeStyle = 'rgb(237,156,82)';
            ctx.beginPath();
            ctx.arc(100, 100, 90, Math.PI * (c/4), Math.PI * (mod8(c+1)/4), false);
            ctx.stroke();
        }

        // 玩家2
        function draw2(c){
            ctx.strokeStyle = 'rgb(36,60,79)';
            ctx.beginPath();
            ctx.arc(100, 100, 90, Math.PI * (c/4), Math.PI * (mod8(c+1)/4), false);
            ctx.stroke();
        }

        if(user===1){
            draw2(pos2);
            draw1(current);
        }
        else if(user===2){
            draw1(pos1);
            draw2(current);
        }
        else{
            draw1(pos1);
            draw2(pos2);
        }

        if(current > end){
            current = parseFloat((current - 0.05).toFixed(3));
            requestAnimationFrame(draw);
        }
    }

    draw();

    document.getElementById('player1').onclick = function () {
        if(isGameOver){
            return;
        }
        if(t1){
            clearTimeout(t1);
        }

        score1++;
        pos1 = mod8(pos1-1);

        setCurrentEnd(pos1);
        user = 1;
        draw();

        t1 = setTimeout(checkGameOver,700);
    };

    document.getElementById('player2').onclick = function () {
        if(isGameOver){
            return;
        }
        if(t2){
            clearTimeout(t2);
        }

        score2++;

        pos2 = mod8(pos2-1);

        setCurrentEnd(pos2);
        user = 2;
        draw();
        t2 = setTimeout(checkGameOver,700);
    };




</script>

</body>
</html>