2.9.3_arcTo()扩展画圆角矩形

来源：互联网发布：windows系统修复编辑：程序博客网时间：2024/05/24 03:20
2.9.3_arcTo()扩展画圆角矩形

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>arcTo()画圆角矩形</title>        <style>            body{                background: #000;            }            #canvas{                background: #fff;            }        </style>    </head>    <body>        <canvas id="canvas" width="1000" height="600"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas'),            context = canvas.getContext('2d');            //初始化            drawGrid('lightgray',10,10);            console.log(Math.PI);            //加入CanvasRenderingContext2D的绘图环境中，风险：可能以后跟官方更新有冲突            CanvasRenderingContext2D.prototype.roundedRect = function (cornerX,cornerY,width,height,cornerRadius){                if(width>0){                    context.moveTo(cornerX+cornerRadius,cornerY);                }else{                    context.moveTo(cornerX-cornerRadius,cornerY);                }                context.arcTo(cornerX+width,cornerY,cornerX+width,cornerY+height,cornerRadius); //以width为正来看，为右上角                context.arcTo(cornerX+width,cornerY+height,cornerX,cornerY+height,cornerRadius);//为右下角                context.arcTo(cornerX,cornerY+height,cornerX,cornerY,cornerRadius);//为左下角                if(width>0){                    context.arcTo(cornerX,cornerY,cornerX+cornerRadius,cornerY,cornerRadius) //为左上角                }else{                    context.arcTo(cornerX,cornerY,cornerX-cornerRadius,cornerY,cornerRadius);                }            }            drawRoundedRect('blue','yellow',50,40,100,100,10); //以左上角为起点绘制            drawRoundedRect('purple','green',275,40,-100,100,20);//以右上角为起点绘制            drawRoundedRect('red','white',300,140,100,-100,30);//以左下角为起点绘制            drawRoundedRect('white','blue',525,140,-100,-100,40);//以右下角沩起点绘制            //画圆角矩形            //参数：描边颜色，填充颜色，矩形一角的点(左上角，或者右上角)，矩形宽，矩形高，圆弧角度            function drawRoundedRect(strokeStyle,fillStyle,cornerX,cornerY,width,height,cornerRadius){                context.beginPath();                context.roundedRect(cornerX,cornerY,width,height,cornerRadius);                context.strokeStyle = strokeStyle;                context.fillStyle = fillStyle;                context.lineWidth = 10;                context.stroke();                context.fill();            }            //画网格线            function drawGrid(color,stepX,stepY){                context.save();                context.strokeStyle = color;                context.lineWidth = 0.5;                for(var i=stepX+0.5;i<context.canvas.width;i+=stepX){                    context.beginPath();                    context.moveTo(i,0);                    context.lineTo(i,context.canvas.height);                    context.stroke();                }                for(var i=stepY+0.5;i<context.canvas.height;i+=stepY){                    context.beginPath();                    context.moveTo(0,i);                    context.lineTo(context.canvas.width,i);                    context.stroke();                }                context.restore();            }    </script></html>
0 0