在SVG中绘制路径路径数据（SVG路径到Canvas路径） [英] Draw path in Canvas with SVG Path data (SVG paths to Canvas paths)

问题描述

我有一个SVG中的国家的详细地图，并以以下格式在区域中分隔：

 < path class =state-x-area
d =m 575.8672,180.4954 c -0.6572，-0.0938 -2.252，-0.4688 -2.627，-0.375 -1.0313,0.1875 0.375,1.501 -0.1875,1.876 -0.4688,0.1875  - 1.0313，-0.0938 -1.501,0.0938 -0.1875,0.0938 -0.1875,0.0938 0.0938,0.4688 -0.0938,0.6572 -0.9375,0.75 -2.4385,0.8438 -3.377,1.6875 -1.125,1.0322 2.0635,3.6582 0.6572,4.6904 -3.2832,2.3447 -1.2197，-1.5947 -3.377,1.501 -0.2813,0.375 0.8438,0.4688 1.0313,0.9375 0.1875,0.376 -0.9375,0.2822 -0.9375,0.6572 0,0.1875 0.9375,1.4072 0.5625,1.876 -1.0313,1.0313 -2.5322，-0.5635 -3.4707，-0.5635 -1.4063 ，0 1.3135,1.3135 -1.0313,0.6572 -0.6572，-0.1875 -1.501，-1.2197 -1.7822，-1.7822 -0.1875，-0.1875 -0.376，-0.751 -0.4697，-0.5625 -0.375,0.5625 -0.2813,1.2188 -0.6563， 1.6875 -1.2188,1.5947 -2.9082,0 -4.3145,0.4697 -0.1875,0.0938 0.1875,0.4688 0,0.6563 -0.8447,0.4688 -2.5332,0.375 -3.377,0 0,0 0，-0.0938 0.0938，-0.0938 0.4688，-0.4688 1.0313，-0.9375 1.2197，-1.4072 3.2822,0.1875 -0.4697，-2.0635 -1.4072，-2.626 -0.6563，-0.375 0.375，-1.5947 0.1875，-2.0635 -0.1875，-0.4697 -1.6885,0.8438 -1.3135，-0.376 0.2813， -0.8438 2.0635，-1.5938 1.4072，-2.1572 -0.4688，-0.375 -2.627，-0.1875 -2.4385，-1.3125 0.1875，-1.501 2.5322，-1.126 2.7197，-3.002 -0.0938,0 -0.0938,0 -0.1875,0 0.5625 ，0.0938 1.126,0.1875 1.7822,0.2813 0.75,0.0938 1.501,0.6563 2.251,0.75 0.751,0.0938 1.501，-0.4688 2.252，-0.375 0.4688,0.0938 0.75,0.751 1.2188,0.751 0.1875,0.0938 0.0938，-0.4697 0.2813，-0.5635 0.4697， -0.4688 1.2197，-0.6563 1.6885，-1.2188 0.376，-0.2822 0.0938，-0.9385 0.376，-1.2197 1.7813，-1.4072 3.6582,0.375 5.3457，-0.375 0.5635，-0.2813 0.6572，-1.126 1.2197，-1.3135 0.0938，-0.0938 3.1895 ，0.375 3.2832,0.2813 0.2813，-0.0938 -0.2813，-0.4688 -0.375，-0.75 -0.2813，-1.501 0.8438，-1.876 2.251，-1.876 0.3752,0 1.1262,2.9072 3.0959,4.502 l 0,0 z
 style =fill：＃000; stroke：#fff; stroke-width：1/> 
  

（我有很多这样的路径。）

现在，我需要通过Canvas（因为重新设计和一个全新的任务，需要做的）。
我看到有可能在Canvas中绘制路径，但我可以用这样的SVG路径吗？

解决方案

在最新版本的Chrome，Firefox和Opera中，您可以使用Path2D API根据SVG路径数据在Canvas中绘制路径。 Path2D构造函数可以选择将SVG路径数据作为输入，并在Canvas上生成等效路径。

在写作时，它似乎不像Internet Explorer和Safari支持API。因此，如果你需要支持这些浏览器，那么你必须使用任何一个转换器将SVG路径转换为等效的Canvas命令，然后使用它。

使用Path2D API在Canvas上的路径：

  window.onload = function（）{var canvas = document.getElementById '帆布'）; var ctx = canvas.getContext（'2d'）; ctx.strokeStyle ='＃000'; ctx.lineWidth = 1; ctx.fillStyle ='＃000'var p = new Path2D（m 75.8672,80.4954 c -0.6572，-0.0938 -2.252，-0.4688 -2.627，-0.375 -1.0313,0.1875 0.375,1.501 -0.1875,1.876 -0.4688,0.1875 -1.0313，-0.0938 -1.501,0.0938 -0.1875,0.0938 0.0938,0.4688 -0.0938,0.6572 -0.9375,0.75 -2.4385,0.8438 -3.377,1.6875 -1.125,1.0322 2.0635,3.6582 0.6572,4.6904 -3.2832,2.3447 -1.2197， - 1.5947 -3.377,1.501 -0.2813,0.375 0.8438,0.4688 1.0313,0.9375 0.1875,0.376 -0.9375,0.2822 -0.9375,0.6572 0,0.1875 0.9375,1.4072 0.5625,1.876 -1.0313,1.0313 -2.5322，-0.5635 -3.4707，-0.5635  - 1.4063,0 1.3135,1.3135 -1.0313,0.6572 -0.6572，-0.1875 -1.501，-1.2197 -1.7822，-1.7822 -0.1875，-0.1875 -0.376，-0.751 -0.4697，-0.5625 -0.375,0.5625 -0.2813,1.2188 -0.6563 ，1.6875 -1.2188,1.5947 -2.9082,0 -4.3145,0.4697 -0.1875,0.0938 0.1875,0.4688,0,0.6563 -0.8447,0.4688 -2.5332,0.375 -3.377,0.0,0，-0.0938 0.0938，-0.0938 0.4688， - 0.4688 1.0313，-0.9375 1.2197，-1.4072 3.2822,0.1875 -0.4697，-2.0635 -1.4072，-2.626 -0.6563，-0.375 0.375，-1.5947 0.1875，-2.0635 -0.1875，-0.4697 -1.6885,0.8438 -1.3135，-0.376 0.2813 ，-0.8438 2.0635，-1.5938 1.4072，-2.1572 -0.4688，-0.375 -2.627，-0.1875 -2.4385，-1.3125 0.1875，-1.501 2.5322，-1.126 2.7197，-3.002 -0.0938,0 -0.0938,0 -0.1875,0 0.5625,0.0938 1.126,0.1875 1.7822,0.2813 0.75,0.0938 1.501,0.6563 2.251,0.75 0.751,0.0938 1.501，-0.4688 2.252，-0.375 0.4688,0.0938 0.75,0.751 1.2188,0.751 0.1875,0.0938 0.0938，-0.4697 0.2813，-0.5635 0.4697 ，-0.4688 1.2197，-0.6563 1.6885，-1.2188 0.376，-0.2822 0.0938，-0.9385 0.376，-1.2197 1.7813，-1.4072 3.6582,0.375 5.3457，-0.375 0.5635，-0.2813 0.6572，-1.126 1.2197，-1.3135 0.0938，-0.0938 3.1895,0.375 3.2832,0.2813 0.2813，-0.0938 -0.2813，-0.4688 -0.375，-0.75 -0.2813，-1.501 0.8438，-1.876 2.251，-1.876 0.3752,0 1.1262,2.9072 3.0959,4.502 l 0,0 z）; ctx.stroke（p）; ctx.fill（p）;}  

 < canvas id ='canvas'height ='600px'width ='600px'>< / canvas>  

SVG输出（用于比较）

 < svg viewBox = 0 600 600'height ='600px'width ='600px'> < path class =state-x-aread =m 75.8672,80.4954 c -0.6572，-0.0938 -2.252，-0.4688 -2.627，-0.375 -1.0313,0.1875 0.375,1.501 -0.1875,1.876 -0.4688,0.1875 -1.0313，-0.0938 -1.501,0.0938 -0.1875,0.0938 0.0938,0.4688 -0.0938,0.6572 -0.9375,0.75 -2.4385,0.8438 -3.377,1.6875 -1.125,1.0322 2.0635,3.6582 0.6572,4.6904 -3.2832,2.3447 -1.2197， - 1.5947 -3.377,1.501 -0.2813,0.375 0.8438,0.4688 1.0313,0.9375 0.1875,0.376 -0.9375,0.2822 -0.9375,0.6572 0,0.1875 0.9375,1.4072 0.5625,1.876 -1.0313,1.0313 -2.5322，-0.5635 -3.4707，-0.5635  - 1.4063,0 1.3135,1.3135 -1.0313,0.6572 -0.6572，-0.1875 -1.501，-1.2197 -1.7822，-1.7822 -0.1875，-0.1875 -0.376，-0.751 -0.4697，-0.5625 -0.375,0.5625 -0.2813,1.2188 -0.6563 ，1.6875 -1.2188,1.5947 -2.9082,0 -4.3145,0.4697 -0.1875,0.0938 0.1875,0.4688,0,0.6563 -0.8447,0.4688 -2.5332,0.375 -3.377,0.0,0，-0.0938 0.0938，-0.0938 0.4688， - 0.4688 1.0313，-0.9375 1.2197，-1.4072 3.2822,0.1875 -0.4697，-2.0635 -1.4072，-2.626 -0.6563，-0.375 0.375，-1.5947 0.1875，-2.0635 -0.1875，-0.4697 -1.6885,0.8438 -1.3135，-0.376 0.2813 ，-0.8438 2.0635，-1.5938 1.4072，-2.1572 -0.4688，-0.375 -2.627，-0.1875 -2.4385，-1.3125 0.1875，-1.501 2.5322，-1.126 2.7197，-3.002 -0.0938,0 -0.0938,0 -0.1875,0 0.5625,0.0938 1.126,0.1875 1.7822,0.2813 0.75,0.0938 1.501,0.6563 2.251,0.75 0.751,0.0938 1.501，-0.4688 2.252，-0.375 0.4688,0.0938 0.75,0.751 1.2188,0.751 0.1875,0.0938 0.0938，-0.4697 0.2813，-0.5635 0.4697 ，-0.4688 1.2197，-0.6563 1.6885，-1.2188 0.376，-0.2822 0.0938，-0.9385 0.376，-1.2197 1.7813，-1.4072 3.6582,0.375 5.3457，-0.375 0.5635，-0.2813 0.6572，-1.126 1.2197，-1.3135 0.0938，-0.0938 3.1895,0.375 3.2832,0.2813 0.2813，-0.0938 -0.2813，-0.4688 -0.375，-0.75 -0.2813，-1.501 0.8438，-1.876 2.251，-1.876 0.3752,0 1.1262,2.9072 3.0959,4.502 l 0,0 zstyle = fill：＃000; stroke：#fff; stroke-width：1/>< / svg>  

^{注意：我已修改了SVG和Canvas中的 moveTo}

---

参考文献：

/ strong>

• 在画布上绘制图形


• Path2D API - MDN

I have a detailed map of a country in SVG with is separated in areas in this format:

<path class="state-x-area"
      d="m 575.8672,180.4954 c -0.6572,-0.0938 -2.252,-0.4688 -2.627,-0.375 -1.0313,0.1875 0.375,1.501 -0.1875,1.876 -0.4688,0.1875 -1.0313,-0.0938 -1.501,0.0938 -0.1875,0.0938 0.0938,0.4688 -0.0938,0.6572 -0.9375,0.75 -2.4385,0.8438 -3.377,1.6875 -1.125,1.0322 2.0635,3.6582 0.6572,4.6904 -3.2832,2.3447 -1.2197,-1.5947 -3.377,1.501 -0.2813,0.375 0.8438,0.4688 1.0313,0.9375 0.1875,0.376 -0.9375,0.2822 -0.9375,0.6572 0,0.1875 0.9375,1.4072 0.5625,1.876 -1.0313,1.0313 -2.5322,-0.5635 -3.4707,-0.5635 -1.4063,0 1.3135,1.3135 -1.0313,0.6572 -0.6572,-0.1875 -1.501,-1.2197 -1.7822,-1.7822 -0.1875,-0.1875 -0.376,-0.751 -0.4697,-0.5625 -0.375,0.5625 -0.2813,1.2188 -0.6563,1.6875 -1.2188,1.5947 -2.9082,0 -4.3145,0.4697 -0.1875,0.0938 0.1875,0.4688 0,0.6563 -0.8447,0.4688 -2.5332,0.375 -3.377,0 0,0 0,-0.0938 0.0938,-0.0938 0.4688,-0.4688 1.0313,-0.9375 1.2197,-1.4072 3.2822,0.1875 -0.4697,-2.0635 -1.4072,-2.626 -0.6563,-0.375 0.375,-1.5947 0.1875,-2.0635 -0.1875,-0.4697 -1.6885,0.8438 -1.3135,-0.376 0.2813,-0.8438 2.0635,-1.5938 1.4072,-2.1572 -0.4688,-0.375 -2.627,-0.1875 -2.4385,-1.3125 0.1875,-1.501 2.5322,-1.126 2.7197,-3.002 -0.0938,0 -0.0938,0 -0.1875,0 0.5625,0.0938 1.126,0.1875 1.7822,0.2813 0.75,0.0938 1.501,0.6563 2.251,0.75 0.751,0.0938 1.501,-0.4688 2.252,-0.375 0.4688,0.0938 0.75,0.751 1.2188,0.751 0.1875,0.0938 0.0938,-0.4697 0.2813,-0.5635 0.4697,-0.4688 1.2197,-0.6563 1.6885,-1.2188 0.376,-0.2822 0.0938,-0.9385 0.376,-1.2197 1.7813,-1.4072 3.6582,0.375 5.3457,-0.375 0.5635,-0.2813 0.6572,-1.126 1.2197,-1.3135 0.0938,-0.0938 3.1895,0.375 3.2832,0.2813 0.2813,-0.0938 -0.2813,-0.4688 -0.375,-0.75 -0.2813,-1.501 0.8438,-1.876 2.251,-1.876 0.3752,0 1.1262,2.9072 3.0959,4.502 l 0,0 z"
      style="fill:#000;stroke:#fff;stroke-width:1" />

(And I have many of such paths.)

Now I need that all done via Canvas (because of a redesign and a totally new task which need to be done with that). I saw that it is possible to draw paths in Canvas but could I do that with such SVG paths?

解决方案

In recent versions of Chrome, Firefox and Opera you could make use of the Path2D API to draw Paths in Canvas based on SVG path data. The Path2D constructor can optionally take a SVG path data as its input and generate the equivalent path on Canvas.

As at the time of writing, it doesn't seem like this API is supported by Internet Explorer and Safari. So, if you need to support those browsers then you have to convert the SVG path into the equivalent Canvas commands using any one of the converter and then put it to use.

Path on Canvas using Path2D API:

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.fillStyle = '#000'

  var p = new Path2D("m 75.8672,80.4954 c -0.6572,-0.0938 -2.252,-0.4688 -2.627,-0.375 -1.0313,0.1875 0.375,1.501 -0.1875,1.876 -0.4688,0.1875 -1.0313,-0.0938 -1.501,0.0938 -0.1875,0.0938 0.0938,0.4688 -0.0938,0.6572 -0.9375,0.75 -2.4385,0.8438 -3.377,1.6875 -1.125,1.0322 2.0635,3.6582 0.6572,4.6904 -3.2832,2.3447 -1.2197,-1.5947 -3.377,1.501 -0.2813,0.375 0.8438,0.4688 1.0313,0.9375 0.1875,0.376 -0.9375,0.2822 -0.9375,0.6572 0,0.1875 0.9375,1.4072 0.5625,1.876 -1.0313,1.0313 -2.5322,-0.5635 -3.4707,-0.5635 -1.4063,0 1.3135,1.3135 -1.0313,0.6572 -0.6572,-0.1875 -1.501,-1.2197 -1.7822,-1.7822 -0.1875,-0.1875 -0.376,-0.751 -0.4697,-0.5625 -0.375,0.5625 -0.2813,1.2188 -0.6563,1.6875 -1.2188,1.5947 -2.9082,0 -4.3145,0.4697 -0.1875,0.0938 0.1875,0.4688 0,0.6563 -0.8447,0.4688 -2.5332,0.375 -3.377,0 0,0 0,-0.0938 0.0938,-0.0938 0.4688,-0.4688 1.0313,-0.9375 1.2197,-1.4072 3.2822,0.1875 -0.4697,-2.0635 -1.4072,-2.626 -0.6563,-0.375 0.375,-1.5947 0.1875,-2.0635 -0.1875,-0.4697 -1.6885,0.8438 -1.3135,-0.376 0.2813,-0.8438 2.0635,-1.5938 1.4072,-2.1572 -0.4688,-0.375 -2.627,-0.1875 -2.4385,-1.3125 0.1875,-1.501 2.5322,-1.126 2.7197,-3.002 -0.0938,0 -0.0938,0 -0.1875,0 0.5625,0.0938 1.126,0.1875 1.7822,0.2813 0.75,0.0938 1.501,0.6563 2.251,0.75 0.751,0.0938 1.501,-0.4688 2.252,-0.375 0.4688,0.0938 0.75,0.751 1.2188,0.751 0.1875,0.0938 0.0938,-0.4697 0.2813,-0.5635 0.4697,-0.4688 1.2197,-0.6563 1.6885,-1.2188 0.376,-0.2822 0.0938,-0.9385 0.376,-1.2197 1.7813,-1.4072 3.6582,0.375 5.3457,-0.375 0.5635,-0.2813 0.6572,-1.126 1.2197,-1.3135 0.0938,-0.0938 3.1895,0.375 3.2832,0.2813 0.2813,-0.0938 -0.2813,-0.4688 -0.375,-0.75 -0.2813,-1.501 0.8438,-1.876 2.251,-1.876 0.3752,0 1.1262,2.9072 3.0959,4.502 l 0,0 z");
  ctx.stroke(p);
  ctx.fill(p);
}

<canvas id='canvas' height='600px' width='600px'></canvas>

SVG Output: (for comparison)

<svg viewBox='0 0 600 600' height='600px' width='600px'>
  <path class="state-x-area" d="m 75.8672,80.4954 c -0.6572,-0.0938 -2.252,-0.4688 -2.627,-0.375 -1.0313,0.1875 0.375,1.501 -0.1875,1.876 -0.4688,0.1875 -1.0313,-0.0938 -1.501,0.0938 -0.1875,0.0938 0.0938,0.4688 -0.0938,0.6572 -0.9375,0.75 -2.4385,0.8438 -3.377,1.6875 -1.125,1.0322 2.0635,3.6582 0.6572,4.6904 -3.2832,2.3447 -1.2197,-1.5947 -3.377,1.501 -0.2813,0.375 0.8438,0.4688 1.0313,0.9375 0.1875,0.376 -0.9375,0.2822 -0.9375,0.6572 0,0.1875 0.9375,1.4072 0.5625,1.876 -1.0313,1.0313 -2.5322,-0.5635 -3.4707,-0.5635 -1.4063,0 1.3135,1.3135 -1.0313,0.6572 -0.6572,-0.1875 -1.501,-1.2197 -1.7822,-1.7822 -0.1875,-0.1875 -0.376,-0.751 -0.4697,-0.5625 -0.375,0.5625 -0.2813,1.2188 -0.6563,1.6875 -1.2188,1.5947 -2.9082,0 -4.3145,0.4697 -0.1875,0.0938 0.1875,0.4688 0,0.6563 -0.8447,0.4688 -2.5332,0.375 -3.377,0 0,0 0,-0.0938 0.0938,-0.0938 0.4688,-0.4688 1.0313,-0.9375 1.2197,-1.4072 3.2822,0.1875 -0.4697,-2.0635 -1.4072,-2.626 -0.6563,-0.375 0.375,-1.5947 0.1875,-2.0635 -0.1875,-0.4697 -1.6885,0.8438 -1.3135,-0.376 0.2813,-0.8438 2.0635,-1.5938 1.4072,-2.1572 -0.4688,-0.375 -2.627,-0.1875 -2.4385,-1.3125 0.1875,-1.501 2.5322,-1.126 2.7197,-3.002 -0.0938,0 -0.0938,0 -0.1875,0 0.5625,0.0938 1.126,0.1875 1.7822,0.2813 0.75,0.0938 1.501,0.6563 2.251,0.75 0.751,0.0938 1.501,-0.4688 2.252,-0.375 0.4688,0.0938 0.75,0.751 1.2188,0.751 0.1875,0.0938 0.0938,-0.4697 0.2813,-0.5635 0.4697,-0.4688 1.2197,-0.6563 1.6885,-1.2188 0.376,-0.2822 0.0938,-0.9385 0.376,-1.2197 1.7813,-1.4072 3.6582,0.375 5.3457,-0.375 0.5635,-0.2813 0.6572,-1.126 1.2197,-1.3135 0.0938,-0.0938 3.1895,0.375 3.2832,0.2813 0.2813,-0.0938 -0.2813,-0.4688 -0.375,-0.75 -0.2813,-1.501 0.8438,-1.876 2.251,-1.876 0.3752,0 1.1262,2.9072 3.0959,4.502 l 0,0 z"
  style="fill:#000;stroke:#fff;stroke-width:1" />
</svg>

^{Note: I have modified the moveTo command coordinates in both the SVG and Canvas path to make the output more visible without switching to full screen mode.}

---

References:

• Drawing shapes on Canvas
• Path2D API - MDN

这篇关于在SVG中绘制路径路径数据（SVG路径到Canvas路径）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！