画布---填充文本,裁剪

超、凢脫俗 2021-09-15 15:04 279阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <canvas id="can"></canvas>
    </body>
    <script>
        var canvas = document.querySelector('#can');
        var c = canvas.getContext('2d');//作画的地方
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;//画布宽
        canvas.height = h;//画布高
        c.font="bold 60pt sans-serif";//大号字体
        c.lineWidth=2;//窄宽线
        c.strokeStyle="#000";
        c.strokeRect(175,25,50,325);//中间竖起的条带
        c.strokeText("<canvas>",15,330)//填充文本的方法,第一个参数是文本,第二第三个参数是x,y坐标...另外注意用的是strokeText()而不是fillText()
        polygon(c,3,200,225,200);//大三角形
        polygon(c,3,200,225,100,0,true);//在内部绘制一个小三角
        //将该路径定义成裁剪区域
        c.clip();
        //用5个像素宽的线段来勾勒路径,完全在裁剪区域内
        c.lineWith=10;
        c.stroke();
        //填充在裁剪区域内的矩形部分和文本部分
        c.fllStyle="#aaa";//暗黑色
        c.fillRect(175,25,50,325);//填充竖直的条带  
        c.fillStyle="#888";//深灰色
        c.fillText("<canvas>",15,330)//填充文本
    
        function polygon(c,n,x,y,r,angle,counterclockwise){
            angle=angle||0;
            counterclockwise=counterclockwise||false;
            c.moveTo(x+r*Math.sin(angle),y-r*Math.cos(angle));
            var delta=2*Math.PI/n;
            for(var i=1;i<n;i++){
                angle+=counterclockwise?-delta:delta;
                c.lineTo(x+r*Math.sin(angle),y-r*Math.cos(angle));
            }
            c.closePath();
        }
    </script>
    
    </html>

![70][]

[70]: /images/20210726/b8eefbeecb6744aaa7f1ff7625902467.png