Canvas 2D 非零和奇偶环绕规则

环境

2D图形不同系统不同浏览器使用图形库可能都不一样。

  • chrome 使用的是 skia 图形函数库
  • firefox 使用的是 cairo 图形函数库

skia 和 cairo 是对后端(backend)的封装,所以可以跨平台,虽然 chrome 使用的图形库是 skia ,但是在不同系统上底层图形库还是可能不一样,比如默认系统:

  • mac os是核心 Quartz 2D 图形库
  • windows xp及以下版本底层引擎是使用 GDI 、 GDI+ ,Windows Vista后使用 Direct2D 


Windows Vista

canvas 和 svg 里面进行填充渲染, CanvasRenderingContext2D.fill() 就是 Canvas 2D API 根据当前填充的样式,填充当前或已经存在的路径,采用 奇偶或非零环绕规则 。

奇偶(Even-odd Rule)

奇偶就是 路径包围的区域任意点P向外做一条射线,如果相交的边总数是奇数填充,反之不填充 。

var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");

context.strokeStyle = "rgb(0,0,0)";
context.fillStyle = "rgb(250,0,0)"

context.beginPath();
context.moveTo(100, 0);
context.lineTo(100+Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
context.lineTo(100-Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
context.lineTo(100+Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
context.lineTo(100-Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
context.lineTo(100, 0);
context.fill('evenodd');
context.stroke();
context.closePath();

非零(Nonzero Rule)

非零就是 路径包围的区域任意点P向外做一条射线,环绕数为0,如果相交的边是从左向右环绕数减1,从右向左环绕数加1,环绕数不为零填充,反之不填充 。

var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");

context.strokeStyle = "rgb(0,0,0)";
context.fillStyle = "rgb(250,0,0)"

context.beginPath();
context.moveTo(100, 0);
context.lineTo(100+Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
context.lineTo(100-Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
context.lineTo(100+Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
context.lineTo(100-Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
context.lineTo(100, 0);
context.fill('nonzero');
context.stroke();
context.closePath();

你可能感兴趣的:(canvas)