canvas Three 各种图形_canvas 炫酷demo-CSDN博客

本文链接：https://blog.csdn.net/youyouyouyou44/article/details/82457404

经过前面的线、三角形，现在是各种图形n.n

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: #000;
        }
        canvas{
            background:#fff;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            //将角度转化为弧度
            function d2a(n){
                return n*Math.PI/180;
            }
            var oC = document.getElementById("canvas1");
            var gd = oC.getContext("2d");

            //不填充矩形
            gd.beginPath();
            gd.lineWidth = 20;
            gd.strokeStyle = "green";
            gd.strokeRect(50,50,160,100);//context.strokeRect(x,y,width,height);

            //gd.stroke();//这里就不需要用stroke画了

            //填充矩形
            gd.beginPath();
            gd.lineWidth = 20;
            gd.strokeStyle = "green";
            gd.fillStyle = "yellow";
            gd.strokeRect(300,50,160,100);
            gd.fillRect(300,50,160,100);

            //不填充圆
            gd.beginPath();
            //不写颜色的情况下，继承最近的颜色
            gd.lineWidth = 20;
            gd.arc(130,300,80,d2a(0),d2a(360),false);
            gd.closePath();
            gd.stroke();

            //填充圆
            gd.beginPath();
            gd.lineWidth = 20;
            gd.arc(380,300,80,d2a(0),d2a(360),false);
            gd.closePath();
            gd.fill();//圆的填充边框不会被遮盖
            gd.stroke();

            //画弧
            gd.beginPath();
            gd.lineWidth = 20;
            gd.arc(600,300,80,d2a(0),d2a(135),false);
            gd.closePath();//不加是不封闭的弧边
            gd.fill();//圆的填充边框不会被遮盖
            gd.stroke();
        },false);
    </script>
</head>
<body>
<canvas id="canvas1" width="800" height="600">
    浏览器需要更新！！！
</canvas>
</body>
</html>

效果图：