canvas填充规则

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.fillStyle='green'

ctx.arc(50, 50, 30, 0, Math.PI * 2, true);

ctx.arc(50, 50, 20, 0, Math.PI * 2, true);

ctx.arc(50, 50, 15, 0, Math.PI * 2, true);

ctx.arc(50, 50, 10, 0, Math.PI * 2, true);

ctx.fill('evenodd');

canvas填充规则的更多相关文章

  1. canvas填充规则，非零环绕

    1.看一块区域是否填充 2.从这个区域拉一条直线 3,看和这条直线相交的轨迹 4.如果顺时针轨迹+1 5.如果逆时针轨迹-1 6.所有轨迹的值计算出来 7.如果是非0,那么填充 8.如果是0那么不填充

  2. HTML5 Canvas 填充与描边(Fill And Stroke)

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  3. HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 理解SVG的图形填充规则

    SVG的图形填充规则通过fill-rule属性来指定. 有效值:   nonzero | evenodd | inherit 默认值:   nonzero fill-rule属性用于指定使用哪一种算法 ...

  5. canvas填充样式

    填充样式主要针对fillStyle.fillStyle除了可以赋值为color,还可以赋值渐变色,包括线性渐变色和径向渐变色,还是和css3里的内容类似. 一.线性渐变 1.设置线性渐变的填充样式 设 ...

  6. html5 canvas 填充渐变形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. H5 canvas填充文字自动换行

    canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...

  8. canvas 填充图片

    画一个更骚气的圆 https://juejin.im/post/5781d0495bbb500061fd683d

  9. html5 canvas 笔记二（添加样式和颜色）

    色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...

随机推荐

  1. 关于keyCode, 键盘代码。 和零散的javascript知识。http://js2.coffee/（转化工具）

    这个是coffeescript代码 document.addEventListener 'turbolinks:load', ->   document.getElementById(" ...

  2. php---------取汉字的第一个字的首字母

    开发中用到的方法,取出第一个汉字的首字母: /** * 取汉字的第一个字的首字母 * @param string $str * @return string|null */ function getF ...

  3. Linux命令详解-echo

    echo会将输入的字符串送往标准输出.输出的字符串间以空白字符隔开,并在最后加上换行号. 1．命令格式: file [ -bchikLnNprsvz ] [ -f namefile ] [ -F se ...

  4. Apereo CAS - 1

    1. download  cas 4.2.2 from https://github.com/apereo/cas/releases 2. eclipse import cas 4.2.2 eclip ...

  5. Hive之序列化与反序列化（SerDe）

    序列化与反序列化的作用 1,序列化是对象转化为字节序列的过程: 2,反序列化是字节码恢复为对象的过程: 序列化的作用主要有两个: (1),对象向的持久化:即把对象转换成字节码后保存文件: (2),对象 ...

  6. poj-2096-期望/dp

    http://poj.org/problem?id=2096 有n种病毒,s个服务器,每天等概率的在某个服务器上发现某一种病毒,问发现所有种类病毒且覆盖所有的服务器的期望天数. 利用全期望公式可以将期 ...

  7. jspf、jsp小记

    jsp页面:

  8. PHP:第六章——02正则基本语法

    <?php header("Content-Type:text/html;charset=utf-8"); //正则表达式的基本结构:匹配符.匹配模式.模式修饰符 //元字符 ...

  9. 《转》深入理解Activity启动流程(三)–Activity启动的详细流程2

    本文原创作者:Cloud Chou. 出处:本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 深入理解Activity启动流程(一)--Activity启 ...

  10. word 使用中 上标符号的实现

    1.   首先在word 中打下一段话  如:   啦啦啦啦啦啦啦啦  然后加入你需要的上标   如   [2] 2.    选中你需要的上标,然后右击 3.   点击字体选项 出现下图: 4.  在 ...