精华内容
下载资源
问答
  • canvas制作圆角矩形(包括填充矩形的功能)

    万次阅读 多人点赞 2018-09-20 14:39:58
    <!DOCTYPE html> <html> <head&...canvas制作圆角矩形(包括填充矩形的功能)</title> </head> <body> <ca

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>canvas制作圆角矩形(包括填充矩形的功能)</title>
    </head>
    
    <body>
        <canvas id="myCanvas" style="border:1px solid #d3d3d3;">
            您的浏览器不支持 HTML5 canvas 标签。</canvas>
        <script>
        window.onload = function() {
            var myCanvas = document.getElementById("myCanvas"); //获取canvas对象  
            if (myCanvas.getContext("2d")) { //判断浏览器是否支持canvas标签  
                //设置canvas的宽度和高度  
                myCanvas.width = 400;
                myCanvas.height = 200;
    
                var context = myCanvas.getContext("2d"); //获取画布context的上下文环境  
                //绘制一个圆角矩形  
                strokeRoundRect(context, 10, 10, 100, 50, 10);  
    
                //绘制并填充一个圆角矩形  
                fillRoundRect(context, 200, 10, 100, 50, 10, 'rgba(0,0,0,0.7)');
            } else {
                alert("您的浏览器不支持canvas,请换个浏览器试试");
            }
        };
    
    
        /**该方法用来绘制一个有填充色的圆角矩形 
         *@param cxt:canvas的上下文环境 
         *@param x:左上角x轴坐标 
         *@param y:左上角y轴坐标 
         *@param width:矩形的宽度 
         *@param height:矩形的高度 
         *@param radius:圆的半径 
         *@param fillColor:填充颜色 
         **/
        function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
            //圆的直径必然要小于矩形的宽高          
            if (2 * radius > width || 2 * radius > height) { return false; }
    
            cxt.save();
            cxt.translate(x, y);
            //绘制圆角矩形的各个边  
            drawRoundRectPath(cxt, width, height, radius);
            cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值  
            cxt.fill();
            cxt.restore();
        }
    
    
        /**该方法用来绘制圆角矩形 
         *@param cxt:canvas的上下文环境 
         *@param x:左上角x轴坐标 
         *@param y:左上角y轴坐标 
         *@param width:矩形的宽度 
         *@param height:矩形的高度 
         *@param radius:圆的半径 
         *@param lineWidth:线条粗细 
         *@param strokeColor:线条颜色 
         **/
        function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {
            //圆的直径必然要小于矩形的宽高          
            if (2 * radius > width || 2 * radius > height) { return false; }
    
            cxt.save();
            cxt.translate(x, y);
            //绘制圆角矩形的各个边  
            drawRoundRectPath(cxt, width, height, radius);
            cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2  
            cxt.strokeStyle = strokeColor || "#000";
            cxt.stroke();
            cxt.restore();
        }
    
        function drawRoundRectPath(cxt, width, height, radius) {
            cxt.beginPath(0);
            //从右下角顺时针绘制,弧度从0到1/2PI  
            cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
    
            //矩形下边线  
            cxt.lineTo(radius, height);
    
            //左下角圆弧,弧度从1/2PI到PI  
            cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
    
            //矩形左边线  
            cxt.lineTo(0, radius);
    
            //左上角圆弧,弧度从PI到3/2PI  
            cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
    
            //上边线  
            cxt.lineTo(width - radius, 0);
    
            //右上角圆弧  
            cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
    
            //右边线  
            cxt.lineTo(width, height - radius);
            cxt.closePath();
        }
        </script>
    </body>
    
    </html>

     

    展开全文
  • 这里创建圆角矩形的drawable(xml)文件。 round_rect_shape.xmlandroid:shape="rectangle" >android:bottomLeftRadius="8dp"android:bottomRightRadius="8dp"android:topLeftRadius="8dp"android:topRightRadius=...

    我想,这是你确切需要的。

    这里创建圆角矩形的drawable(xml)文件。 round_rect_shape.xml

    android:shape="rectangle" >

    android:bottomLeftRadius="8dp"

    android:bottomRightRadius="8dp"

    android:topLeftRadius="8dp"

    android:topRightRadius="8dp" />

    这里布局文件:my_layout.xml

    android:id="@+id/linearLayout1"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:background="@drawable/round_rect_shape"

    android:orientation="vertical"

    android:padding="5dp" >

    android:id="@+id/textView1"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="Something text"

    android:textAppearance="?android:attr/textAppearanceLarge"

    android:textColor="#ff0000" />

    android:id="@+id/editText1"

    android:layout_width="match_parent"

    android:layout_height="wrap_content" >

    - >在上面的代码中,具有背景的LinearLayout(即放置到创建密钥的作用圆角矩形)。 因此,您可以将任何视图像TextView,EditText ...放入该LinearLayout中,以便将所有背景视为圆形矩形。现在

    展开全文
  • 圆角矩形制作想必大家都会吧,但真正的实现原理想必并没有几个人知道,在本文有个不错的示例或许能帮助大家更好的理解其中的原理,感兴趣的朋友可以参考下
  • 纯CSS制作圆角矩形框知识总结

    千次阅读 热门讨论 2015-08-23 21:33:30
    制作后台登录页的时候,需要从网页上面把那个圆角矩形框选取下来,然后通过Photoshop进行切割,在进行设置,最后得到需要的登录框的圆角矩形框。如下图。  但是登录最新的智囊团的那个登录页面的时候,上面...

        在制作后台登录页的时候,需要从网页上面把那个圆角矩形框选取下来,然后通过Photoshop进行切割,在进行设置,最后得到需要的登录框的圆角矩形框。如下图。


        但是登录最新的智囊团的那个登录页面的时候,上面的那个圆角矩形框已经没有了,最新的登陆页面跟QQ邮箱登录页面一样,没有了圆角矩形框。所以我就想到了用css自己堆出来一个圆角矩形框,通过查找资料,以及自己的一些使用方法的改进,最终得到了自己所需要的圆角矩形框——纯CSS设计圆角矩形框

    下面讲一下思路:圆角矩形框的难点就在于如何把那个圆角表示出来,其实我们把那个圆角的地方放大一下就会发现,所谓的圆角并不是严格的圆角,只是由于线条看起来比较和谐,那个圆角其实也是直角的框的那个直角。


    这就是一个放大了的圆角矩形框,可以看到圆角的具体构成。

    明白了原理,下面是代码的实现部分,非常简单:

    <span style="font-family:KaiTi_GB2312;font-size:24px;"><%--制作圆角矩形的代码-HTML代码部分--%>
                <div class="divbox">
                    <div class="div1"></div>
                    <div class="div2"></div>
                    <div class="divmiddle">
                       主要内容
                    </div>
                    <div class="div2"></div>
                    <div class="div1"></div>
                </div>
    </span>
    <span style="font-family:KaiTi_GB2312;font-size:24px;">/*圆角框的制作-CSS代码部分*/
    
    .divbox {
        width: 580px;     
    }
    
    /*.div1 .div2 .divmiddle{
        float :right  ;
    }*/
    .div1 {
        background: #999999;
        border-left: #999999 solid 3px;
        border-right: solid 3px #999;
        margin: 0px 6px;
        height: 3px;
        overflow: hidden;
    }
    
    .div2 {
        background: #FFF;
        border-left: #999999 solid 3px;
        border-right: solid 3px #999;
        margin: 0px 2px;
        height: 3px;
        overflow: hidden;
    }
    
    .divmiddle {
        height: 285px;
        border-left: #999999 solid 3px;
        border-right: solid 3px #999;
    }
    .divmiddle p,h3,btnLogin,btnCancel{
        float :right ;
    }
    </span>

    通过代码可以看出,圆角矩形框通过3类的div标签进行组合设计,最终形成一个圆角矩形框。这里关键的是overflow属性,是把被覆盖的内容给隐藏了,所以可以露出自己需要的部分,这里的技巧需要读者自己思考。

    接下来就是实战了,在middle中添加如下代码:

    <span style="font-family:KaiTi_GB2312;font-size:24px;"><h3>牛腩新闻发布系统后台登录</h3>
                        <img src="Images/步枪.jpg" alt="logo" height="150" width="150"/>
                        <p>用户名:<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></p>
                        <p>密  码:<asp:TextBox ID="txtPassword" runat="server" TextMode ="Password"></asp:TextBox></p>
                        <p>验证码:123456<asp:TextBox ID="txtCode" runat="server" CssClass ="txtcode" Width="104px"></asp:TextBox></p>
                        <p><asp:Button ID="btnLogin" runat="server" Text="登录" /><asp:Button ID="btnCancel" runat="server" Text="取消" /></p>
                        <div><div class ="footer">版权声明:&copy;<a href="http://niunun.javaeve.com">牛腩</a>  &<a href="http://www.tg029.com" target="blank">众志网</a></div></div>
    </span>

    按照正常的理解,在圆角矩形框中会出现一系列的控件,事实上也是如此,但是却出现了另外一个问题,如下图:


    圆角矩形框的边出现了空白,这是由于在使用了<h3>,在这个正常流中<h3>这个部分的宽度比较大,把左右两边的正常流的边给撑开了,所以出现了断线的部分。那么只要把<h3>的部分从正常流中拿走就可以改正这个缺点,对,就是float属性,下面的效果是经过我半个下午2个小时的不断调试,最终形成的结果:

        通过float属性,浮动控件,然后再重新进行定位,这样的效果看似简单,后面包含的过程却是对自己知识的一个总结提升,这个过程对我来说非常享受,全身心的投入到最后的效果出来,感觉那真是爽。当然了这个设计效果还是有提升空间的,比如把整个的框移到垂直方向上的中间线,等等,那就发挥你的想象力吧。



    展开全文
  • SVG制作圆角矩形代码

    2014-01-24 09:14:24
    代码只包含一个circlerect.svg和circlerect.html文件,.svg收藏起来,以后用到的时候,可直接使用,不用再费脑筋去想,去查阅资料了。
  • div+css制作圆角矩形

    千次阅读 2009-02-06 23:29:00
    学习了用div+css制作圆角矩形,先记下来div+css制作圆角矩形<!--body{background:white;}#main{margin:0 20%;background:red;}.up{background:white;}.up div{height:1px;overflow:hidden;ba

    学习了用div+css制作圆角矩形,先记下来

     

    以下摘自 百度知道

     

    圆角它靠1px的高度来拼起来的
    比如: 大层div宽度为100px;

    圆角开始:上

    第一行div,高度为1px; 宽度为94px; 左右两边挤开3px,
    第二行div,高度为1px; 宽度为96px; 左右两边挤开2px,
    第三行div,高度为1px; 宽度为98px; 左右两边挤开1px, 

    内容

    圆角开始:下

    第一行div,高度为1px; 宽度为98px; 左右两边挤开1px,
    第二行div,高度为1px; 宽度为96px; 左右两边挤开2px,
    第三行div,高度为1px; 宽度为94px; 左右两边挤开3px,


    两边的边距自定,这样就形成一个弧形了。

     

     

    展开全文
  • PS如何制作圆角矩形图片

    千次阅读 2014-11-20 10:00:01
     选择圆角矩形工具     在圆角矩形工具中选择路径选项     圆角矩形的半径,可以设置为20-30     在图片中拉出圆角     在右下角的图层面板中点击打开路径面板,右键选择...
  • CSS制作圆角矩形实例

    2008-05-02 20:30:31
    现在网页上用到圆弧的地方一般都是图片,这里介绍一种用CSS作的圆角矩形,用编程的方法在网页上生成圆弧。一开始在网上发现圆弧不是图片的时候真的惊呆了,后来就仔细研究了别人做的东西,终于弄明白了,大家只要看...
  • PS 如何制作 圆角矩形 图片

    千次阅读 2013-05-30 10:12:50
     选择圆角矩形工具     在圆角矩形工具中选择路径选项     圆角矩形的半径,可以设置为20-30     在图片中拉出圆角     在右下角的图层面板中点击打开路径面板,右键选择...
  • 制作圆角矩形好图片水印都是图片合成的操作 composite -gravity southeast mask175.png src.jpg dest.jpg -gravity southeast 指叠加位置为右下角 如果要求在正中间,参数为center 如果要求在垂直据顶部、...
  • 前言在写HTML这类自带样式设置的渲染语言时,可能写出一个圆角矩形仅仅就是一个样式设置就搞定了;但是有没有想过,直接在webGL中用原生的着色器算法写出一个类似CSS圆角样式的效果怎么做?四角等价圆角效果的实现...
  • Fireworks(FW)制作圆角矩形

    千次阅读 2009-10-28 23:53:00
    2、使用圆角矩形工具在画布上画一个圆角矩形,在属性检查器上,输入它的大小,大小和上图的大小一样。选中上图就可以知道它的大小。3、调整圆角矩形的填充颜色为白色。把圆角矩形和实例中的“花”图片完全重合。 4...
  • --设置圆角矩形的幅度--> <!-- 渐变 --> <!-- 固定色:当设置了固定颜色之后,渐变颜色也就失效了 --> <!-- android:dashWidth="3dip" android:width="2dip" android:color="#000000" android:...
  • 今天无意间在网上发现了一个公式,叫做超椭圆方程,效果就是圆角矩形:原文地址:http://blog.csdn.net/tom_221x/article/details/50924154原文中是使用shader来实现,这里我使用这个公式来尝试直接读取图片文件生成...
  • 前言:最近需要做一个带边框用户的圆角头像,然后搜索了下,发现大部分都是使用shape来做的,于是使用Canvas做了个头像处理
  • 首先我们把这张原图做成一张圆角矩形的图片,下图为原图:(由于本人比较喜欢五月天,所以就用五月天的图片) 1、首先,选择圆角矩形工具,并调整好圆角的半径,如图: 2、然后选择你要把它变成圆角...
  • 在项目中美工提供给我们的图片通常是矩形的,我们如何把矩形的图片做成圆角矩形、椭圆形以其圆形效果的图形显示效果,这就是我这篇文章要讲的内容。 效果如下: 我这里使用的是 开源项目 ...
  • 用canvas画只有一个角是圆角矩形,能画出来么?CSS布局HTML小编今天和大家分享各位大侠指点,找到方法了float[] radii={12f,12f,0f,0f,0f,0f,0f,0f};path.addRoundRect(new RectF(0, 0, 50, 50), radii, Path....
  • 圆角矩形代码,HTML圆角矩形,适合新手学习
  • PS圆角制作 ps圆角矩形 ps圆角边框 ps做圆角 ps圆角处理 以上是效果 方法如下: 1:用photoshop打开原图,并取消背景锁。 2:选“工具栏”的“圆角矩形工具”调节适合的半径,本图半径是“15象素”。(选取自己...
  • 圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,我们可以使用css来制作圆角矩形,下面我们来看一下使用css制作圆角矩形的方法。圆角矩形可以用在输入框中、导航栏中、相框上、...
  • //画布的圆角矩形 // ** // * 绘制圆角矩形 //* @param { Object } ctx - canvas组件的绘图上下文 //* @param { Number } x - 矩形的x坐标 //* @param { Number } y - 矩形的y坐标 //* @param { Number }...
  • 圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形。border-radius属性值一共有4个,左上、右上、右下、左下。border-radius属性值规则如下:第一个值为左上、第二个值为右上、第三个值为右下、第四...
  • 圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形。border-radius属性值一共有4个,左上、右上、右下、左下。border-radius属性值规则如下:第一个值为左上、第二个值为右上、第三个值为右下、第四...
  • //画圆角矩形,填充圆角矩形BOOL CCurveCurrentDlg::OnEraseBkgnd(CDC *pDC){ CRect rect; this->GetClientRect(&rect); CRgn roundRect; //圆角矩形区 CBrush sel...
  • canva绘制圆角矩形

    2019-10-02 21:23:00
    在做组态的时候,需要支持矩形圆角格式,但是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制 方案一、统一圆角 <!DOCTYPE html> ...canvas制作圆角矩形(包括填充矩形的功能)<...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,886
精华内容 14,354
关键字:

如何制作圆角矩形