canvas demos 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border-color: black;
            border:1px solid;
        }
    </style>
    <script>
        function draw(){
            var canvas = document.getElementById("mycanvas");
            // //兼容性判断
            // if(canvas.getContext){
            //     var ctx = canvas.getContext('2d');

            //     ctx.fillStyle = "rgba(200,0,0,1)";//填充颜色

            //     ctx.fillRect(10,10,55,50);

            //     ctx.fillStyle = "rgba(0,0,200,0.5)";
            //     ctx.fillRect(30,30,55,50);
                
            //     ctx.clearRect(20, 20, 50, 50);

            //     ctx.strokeRect(50,50,50,50);
            // }
       
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                ctx.fillRect(25,25,100,100);
                ctx.clearRect(45,45,60,60);
                ctx.strokeRect(50,50,50,50);
            }
                
        }
    </script>
</head>
<body onload="draw();">
    <canvas width="450" height="450" id="mycanvas">
        浏览器版本太低不支持，请跟换或者升级浏览器。
    </canvas>
</body>
</html>

 

posted @ 2022-06-14 15:47  虚无——缥缈  阅读(22)  评论(0)    收藏  举报