• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  广告

                  canvas 设置矩形样式

                  2018-10-20 12:18| 作者: admin| 查看: 1256| 评论: 0|来自: 蚂蚁部落

                  本文简单总结一下为canvas矩形设置样式的简单方式。

                  绘制矩形的方式有多种,具体参阅canvas绘制矩形简单介绍一章节。

                  首先看一段代码实例:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <script>
                  window.onload=function(){
                    let canvas = document.getElementById("canvas");
                    let ctx = canvas.getContext("2d");
                    ctx.rect(10, 10, 100, 100);
                    ctx.stroke();
                  }
                  </script>
                  </head>
                  <body>
                  <canvas id="canvas" width="300" height="150"></canvas>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201810/20/121912yawidzp7gkdoaqpn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  上述代码默认绘制一个具有描边无填充矩形。

                  下面通过代码实例分步介绍一下为此矩形添加相关样式。

                  一.设置描边:

                  默认描边颜色是#000000,当然?#37096;?#20197;自定义。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <script>
                  window.onload=function(){
                    let canvas = document.getElementById("canvas");
                    let ctx = canvas.getContext("2d");
                    ctx.rect(10, 10, 100, 100);
                    ctx.strokeStyle="blue";
                    ctx.stroke();
                  }
                  </script>
                  </head>
                  <body>
                  <canvas id="canvas" width="300" height="150"></canvas>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201810/20/121944qdd1rhlh9r6xu09u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  通过strokeStyle属性可以设置描边的颜色。

                  不过此属性的功能并不仅限于设置颜色,还能够设置渐变等效果。

                  具体参阅canvas strokeStyle一章节。

                  二.设置描边的粗细:

                  描边的粗细?#37096;?#20197;自定义,代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <script>
                  window.onload=function(){
                    let canvas = document.getElementById("canvas");
                    let ctx = canvas.getContext("2d");
                    ctx.rect(10, 10, 100, 100);
                    ctx.lineWidth=10;
                    ctx.strokeStyle="blue";
                    ctx.stroke();
                  }
                  </script>
                  </head>
                  <body>
                  <canvas id="canvas" width="300" height="150"></canvas>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201810/20/122022guipnvnzn2rom8nm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  上述代码可以将矩形描边粗细设置为10px。

                  关于lineWidth属性可以参阅canvas lineWidth绘制原理一章节。

                  三.设置矩形填充:

                  下面再来看如何设置矩形的背景样式,也就是它的填充。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <script>
                  window.onload=function(){
                    let canvas = document.getElementById("canvas");
                    let ctx = canvas.getContext("2d");
                    ctx.rect(10, 10, 100, 100);
                    ctx.lineWidth=10;
                    ctx.strokeStyle="blue";
                    ctx.fillStyle="red";
                    ctx.stroke();
                    ctx.fill();
                  }
                  </script>
                  </head>
                  <body>
                  <canvas id="canvas" width="300" height="150"></canvas>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201810/20/122106xsvbd0yldl0dl66k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  上面代码将矩形使用红色背景色填充。

                  但是有没有发现一个奇怪的现象,描边的宽度已经不是最初的10px。

                  这是因为描边并不是完全向外绘制的,而是从中线向两侧绘制,填充会覆盖内侧的描边。

                  具体参阅canvas lineWidth绘制原理一章节。

                  解决方案很简单,具体参阅canvas 填充覆盖描边一章节。

                  fillStyle不止可以设置背景色,还可以设置渐变或者图案等效果。

                  具体参阅canvas fillStyle一章节。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            诈金花哪个游戏最真实 彩经网走势图大全 全球通在线娱乐平台 吉林时时彩平台官网 双色球大奖得主陈 香港六彩特码资料 2019年九肖公式规律 老时时彩走势图2元模式 七乐彩走势图1000期大 广西快乐十分20191月份开奖日期 pc蛋蛋幸运28怎样充值 qq彩票快乐10分 藏宝图是什么生肖 河南11选5走势图带连线 陕西十一选五乐三