master

分支 (1)

管理

管理

master

canvas
/
rounRect.html

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>曲线绘制arc</title>
    <style>
        *{margin: 0;padding: 0;}
    </style>
</head>
<body style="height: 100%">
<canvas id="canvas" style="border:1px solid gray;">该浏览器不支持canvas,请更换浏览器后重试</canvas>
</body>
<script>
    var CANVAS_WINDTH = document.body.clientWidth-10;
    var CANVAS_HEIGHT = document.body.clientHeight-10;
    window.onload =function () {
        var canvas = document.getElementById("canvas");
        canvas.width = CANVAS_WINDTH;
        canvas.height = CANVAS_HEIGHT;
        var cxt = canvas.getContext('2d');
        var x = (canvas.width-500)/2;
        var y = (canvas.height-500)/2;
        var width = 500;
        var height = 500;
        fillRoundrect(cxt,x,y,width,height,10,"#bbada0");
        for (var i = 0;i<4;i++){
            for(var j = 0;j<4;j++){
                fillRoundrect(cxt,x+20+j*120,y+20+i*120,100,100,6,"#ccc0b3");
            }
        }

        strokeRoundrect(cxt,200,200,200,200,20);
        /*
        * 辅助先绘制
        * */
        cxt.beginPath();
        cxt.moveTo(150,220);
        cxt.lineTo(450,220);
        cxt.stroke();
        cxt.beginPath();
        cxt.moveTo(150,380);
        cxt.lineTo(450,380);
        cxt.stroke();
        cxt.beginPath();
        cxt.moveTo(220,150);
        cxt.lineTo(220,450);
        cxt.stroke();
        cxt.beginPath();
        cxt.moveTo(380,150);
        cxt.lineTo(380,450);
        cxt.stroke();
    }

    /*
    * 绘制圆角矩形
    * */
   function strokeRoundrect(cxt,x,y,width,height,R,lineWidth,strokeStyle) {
       if(2*R>width||2*R>height){
           return;
       }
       cxt.save();
       cxt.translate(x,y);
       pathRoundRect(cxt,width,height,R);
       cxt.lineWidth = lineWidth||1;
       cxt.strokeStyle = strokeStyle||"black";
       cxt.stroke();
       cxt.restore();
   }

   /*
   * 绘制填充圆角矩形
   * */
   function fillRoundrect(cxt,x,y,width,height,R,fillStyle) {
       if(2*R>width||2*R>height){
           return ;
       }
       cxt.save();
       cxt.translate(x,y);
       pathRoundRect(cxt,width,height,R);
       cxt.fillStyle = fillStyle||'black';
       cxt.fill();
       cxt.restore();
   }

   /*
   * 绘制圆角矩形状态
   * */
   function pathRoundRect(cxt,width,height,R) {
       cxt.beginPath();
       cxt.arc(R,R,R,Math.PI,1.5*Math.PI);//左上角圆弧
       cxt.lineTo(width-R,0);
       cxt.arc(width-R,R,R,1.5*Math.PI,2*Math.PI);//右上角圆弧
       cxt.lineTo(width,height-R);
       cxt.arc(width-R,height-R,R,0,0.5*Math.PI);//右下角圆弧
       cxt.lineTo(R,height);
       cxt.arc(R,height-R,R,0.5*Math.PI,Math.PI);//左下角圆弧
       cxt.closePath();
   }
</script>
</html>