• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    福利彩票河北20选5:canvas 填充覆盖描边

    燕赵风采20选5走势图 www.fllv.net 2018-10-20 13:18| 作者: admin| 查看: 1727| 评论: 0|来自: 蚂蚁部落

    填充和描边是canvas中最为基本的操作,本文不做详细介绍。

    更多内容可以参阅canvas 设置矩形样式一章节。

    但是有时候,这些操作会带来令人奇怪的现象,比如本文将要介绍的填充覆盖描边。

    首先看一段代码实例:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <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/131940wzazommkvvmfvf6p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

    代码分析如下:

    (1).lineWidth属性设置描边宽度为10px,也就是边框的厚度。

    (2).fillStyle属性设置填充颜色为红色。

    (3).很明显边框的描边宽度没有10px,也就是它很可能被填充遮盖了。

    原理很简单,canvas绘制线条的时候,并不是沿着它的起始位置向外扩展,而是将这个起始位置作为中线向两侧扩展,这么说可能大家还不明白,具体参阅canvas lineWidth绘制原理一章节。

    如果不想出现上述现象,可以采用如下解决方案:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <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.fill();
      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/132017vle5dmjfl13evdkv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

    上述代码的表现已经恢复正常,很简单只要将ctx.fill方法和ctx.stroke方法调整一下位置即可。

    也就是先填充再描边,那么描边就会覆盖在填充之上,后来者居上,很轻松解决此问题。

    在网上也有关于此方面的解决方案,最好还是要了解出现此问题的原理。

    可以做到举一反三,而不是头痛医头脚痛医脚,仅浮在表面。

    更多canvas知识可以参阅canvas教程板块。

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 福彩3D走势图带连线 赛马会官方网 海南环岛赛直播cctv 北京pk10大特小特规则 体育彩票超级大乐透中奖规则 七乐彩复式投注 北京赛车追长龙打法 篮球让分胜负主队输了 北京赛车pk10 北京赛车冠军万能码 彩票竟彩网 浙江体彩20选5走势图i 北单sp开奖足彩官网 彩票网长局1971期 北京赛车五码看号技巧 重庆时时彩走势图