2.9.3_arcTo()扩展画圆角矩形

最新推荐文章于 2020-05-18 21:20:58 发布

信封中的阳光

最新推荐文章于 2020-05-18 21:20:58 发布

阅读量488

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71078197

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
2.9.3_arcTo()扩展画圆角矩形

2.9.3_arcTo()扩展画圆角矩形<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>arcTo()画圆角矩形</title> <style> body{ background: #000;
复制链接

扫一扫