首页 > 代码库 > canvas标签的运用

canvas标签的运用

2024-10-09 23:48:39   213人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{border: dotted 1px black;}
    </style>
</head>
<body>
    <canvas class="myCanvas1" height="300" width="300"></canvas>//第一幅图布

    <canvas class="myCanvas2" height="300" width="300"></canvas>//第二幅图布

    <canvas class="myCanvas3" height="300" width="300"></canvas>//第三幅图布

    <script>
        //第一幅
        var myCanvas1 = document.getElementsByClassName(‘myCanvas1‘)[0];
        var head = myCanvas1.getContext(‘2d‘);
        head.beginPath();
        head.fillStyle = ‘blue‘;
        head.arc(75,75,50,0,2*Math.PI);
        head.fill();

        head.beginPath();
        head.fillStyle = ‘black‘;
        head.arc(225,75,50,0,2*Math.PI);
        head.fill();

        head.beginPath();
        head.strokeStyle = ‘red‘;
        head.fillStyle = ‘yellowgreen‘;
        head.rect(75,175,150,75);
        head.fill();
        head.stroke();
        //第二幅
        var myCanvas2 = document.getElementsByClassName(‘myCanvas2‘)[0];
        var ten = myCanvas2.getContext(‘2d‘);
        ten.beginPath();//上
        ten.fillStyle = ‘blue‘;
        ten.fillRect(100,0,100,25);

        ten.beginPath();
        ten.fillStyle = ‘black‘;//下
        ten.fillRect(100,275,100,25);

        ten.beginPath();
        ten.fillStyle = ‘red‘;//左
        ten.fillRect(0,100,25,100);

        ten.beginPath();
        ten.fillStyle = ‘gray‘;//右
        ten.fillRect(275,100,25,100);

        ten.beginPath();
        ten.fillStyle = ‘yellow‘;//竖上
        ten.fillRect(100,25,100,75);

        ten.beginPath();
        ten.fillStyle = ‘pink‘;//竖下
        ten.fillRect(100,200,100,75);

        ten.beginPath();
        ten.fillStyle = ‘gold‘;//横左
        ten.fillRect(25,100,75,100);

        ten.beginPath();
        ten.fillStyle = ‘orange‘;//横右
        ten.fillRect(200,100,75,100);

        ten.beginPath();
        ten.fillStyle = ‘yellowgreen‘;//中间
        ten.fillRect(100,100,100,100);

        //第三幅
        var myCanvas3 = document.getElementsByClassName(‘myCanvas3‘)[0];
        var tank = myCanvas3.getContext(‘2d‘);
        tank.beginPath();//上
        tank.fillStyle = ‘blue‘;
        tank.fillRect(100,0,100,25);

        tank.beginPath();
        tank.fillStyle = ‘black‘;//下
        tank.fillRect(100,275,100,25);

        tank.beginPath();
        tank.fillStyle = ‘red‘;//左
        tank.fillRect(0,100,25,100);

        tank.beginPath();
        tank.fillStyle = ‘gray‘;//右
        tank.fillRect(275,100,25,100);

        tank.beginPath();
        tank.fillStyle = ‘gold‘;//横
        tank.fillRect(25,125,250,50);

        tank.beginPath();
        tank.fillStyle = ‘yellow‘;//竖
        tank.fillRect(125,25,50,250);

    </script>
</body>
</html>

canvas标签的运用


联系
我们