canvas中剪辑、阴影以及曲线的绘制

区域剪辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //在矩形右上角绘制一个圆
        ctx.arc(300,100,200,0,2*Math.PI,true);
        //进行区域剪辑
        //后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑
        ctx.clip();

        ctx.fillStyle="pink";
        //绘制矩形
        ctx.fillRect(100,100,200,200);
       
    
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //在矩形右上角绘制一个圆
        ctx.arc(300,100,200,0,2*Math.PI,true);
        //进行区域剪辑
        //后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑
        ctx.clip();

        ctx.fillStyle="pink";
        //绘制矩形
        ctx.fillRect(100,100,200,200);

        //再绘制一个圆
        ctx.fillStyle="#abcdef";
        ctx.beginPath();
        ctx.arc(400,300,100,0,2*Math.PI,true);
        ctx.fill();
       
    
    </script>
</body>
</html>

取消区域剪辑，使用save和restore

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.save();

        //在矩形右上角绘制一个圆
        ctx.arc(300,100,200,0,2*Math.PI,true);
        //进行区域剪辑
        //后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑
        ctx.clip();

        ctx.fillStyle="pink";
        //绘制矩形
        ctx.fillRect(100,100,200,200);

        ctx.restore();
        
        //再绘制一个圆
        ctx.fillStyle="#abcdef";
        ctx.beginPath();
        ctx.arc(400,300,100,0,2*Math.PI,true);
        ctx.fill();
       
    
    </script>
</body>
</html>

绘制四色圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //绘制一个圆
        ctx.arc(300,200,100,0,2*Math.PI,true);
        //进行区域剪辑
        //后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑
        ctx.clip();

        ctx.fillStyle="pink";
        //绘制矩形
        ctx.fillRect(200,100,300,200);

        ctx.fillStyle="lightgreen";
        //绘制矩形
        ctx.fillRect(300,100,400,200);

        ctx.fillStyle="#abcdef";
        //绘制矩形
        ctx.fillRect(200,200,300,300);

        ctx.fillStyle="orange";
        //绘制矩形
        ctx.fillRect(300,200,400,300);
       
    
    </script>
</body>
</html>

阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.fillStyle="pink";
        //阴影x轴偏移
        ctx.shadowOffsetX=10;
        //阴影y轴偏移
        ctx.shadowOffsetY=10;
        //阴影颜色
        ctx.shadowColor="rgba(0,0,0,.2)";
        //模糊程度
        ctx.shadowBlur=1;
        //绘制矩形
        ctx.fillRect(100,100,100,100);

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

文字阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.fillStyle="pink";
        //阴影x轴偏移
        ctx.shadowOffsetX=10;
        //阴影y轴偏移
        ctx.shadowOffsetY=10;
        //阴影颜色
        ctx.shadowColor="rgba(0,0,0,.2)";
        //模糊程度
        ctx.shadowBlur=1;
        //绘制矩形
        ctx.fillRect(100,100,100,100);
        //绘制文字
        ctx.font="20px sans-serif";
        ctx.fillText("cyy呀",300,300);

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

补充一下，设置文字的大小，这个ctx.font中，必须要加字体

我刚开始只是单纯设置了20px，发现是不生效的

必须加上字体如sans-serif才可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.fillStyle="pink";
        //阴影x轴偏移
        ctx.shadowOffsetX=10;
        //阴影y轴偏移
        ctx.shadowOffsetY=10;
        //阴影颜色
        ctx.shadowColor="rgba(0,0,0,.2)";
        //模糊程度
        ctx.shadowBlur=1;
        //绘制矩形
        ctx.fillRect(100,100,100,100);
        //绘制文字
        ctx.font="20px sans-serif";
        ctx.fillText("cyy呀",300,300);
        ctx.fillText("小仙女",100,300);

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

绘制曲线

圆弧的绘制 arc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.arc(200,200,50,0,Math.PI/2,true);//逆时针
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(400,200,50,0,Math.PI/2,false);//顺时针
        ctx.stroke();

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