canvas教程

关于canvas中用到的函数整理(3)

字号+ 作者:H5之家 来源:H5之家 2018-01-26 18:00 我要评论( )

When usingfill(orand isPointinPath) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful whe

When using fill (orand isPointinPath) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.

当我们用到fill(或者clip和isPointinPath)你可以选择一个填充规则,该填充规则根据某处在路径的外面或者里面来决定该处是否被填充,这对于自己与自己路径相交或者路径被嵌套的时候是有用的。

Two values are possible:

  • "nonzero": The non-zero winding rule, which is the default rule.
  • "evenodd": The even-odd winding rule.
  • 两个可能的值:

  •  "nonzero": non-zero winding rule, 默认值.
  •  "evenodd":  even-odd winding rule.
  • In this example we are using the evenodd rule.

    这个例子,我们用填充规则evenodd 

    function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI*2, true); ctx.arc(50, 50, 15, 0, Math.PI*2, true); ctx.fill("evenodd"); }

    Screenshot Live sample

     


    待续。。。


     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • [js高手之路] html5 canvas系列教程,html5canvas

      [js高手之路] html5 canvas系列教程,html5canvas

      2018-01-26 14:03

    • 实现远程实时通信 Html5:Canvas+WebSocket

      实现远程实时通信 Html5:Canvas+WebSocket

      2018-01-26 13:46

    • WPF中关于Canvas画线段的问题

      WPF中关于Canvas画线段的问题

      2018-01-24 17:09

    • 鑷畾涔塚iew鍒╁櫒Canvas鍜孭aint璇﹁В

      鑷畾涔塚iew鍒╁櫒Canvas鍜孭aint璇﹁В

      2018-01-24 16:00

    网友点评
    t