Показывать изображения SVG в канвасе

Сценарий для использования предустановленных фигур (описанных в SVG) в канвасовой поверхности HTML 5.

Было бы интересно иметь библиотеку изображений для канвы, не только спрайтов, но и векторных изображений, которые можно было бы изменить, изменить или перекомпоновать для создания новых изображений.

Используя формат SVG, можно описать эти изображения просто и стандартно.

Сценарий, созданный для их отображения, не содержит изображений, сделанных с помощью программного обеспечения типа Inkscape, которое использует SVG в качестве формата хранения, но не предназначено для оптимизации кода SVG. Ваши изображения должны быть написаны в исходном коде, но такое программное обеспечение, как SVG Edit, также может предоставить настоящий код SVG.

В архив включен инструмент для преобразования изображений svg в объекты JavaScript. Затем функция SVGtoCanvas отображает изображение в теге canvas, со скоростью, несравнимо превышающей скорость экрана SVG.

Пример использования

SVG

Исходный код изображения:

<svg id="car"  xmlns="http://www.w3.org/2000/svg"  width="400" height="200">
<g stroke="#000000"  stroke-width="2" fillStyle="none">
<!-- Bodywork -->
<line x1="50" y1="40" x2="100" y2="40" />
<line x1="45" y1="35" x2="50" y2="40" />
<line x1="100" y1="40" x2="105" y2="35" />
<line x1="105" y1="35" x2="140" y2="35" />
<line x1="105" y1="35" x2="100" y2="15" />
<line x1="40" y1="60" x2="140" y2="60" />
<!-- Radiator -->
<rect x="140" y="35" width="5" height="25" fill="none" stroke-width="2" />
<!-- Wheels -->
<ellipse cx="30" cy="60" rx="15" ry="15" fill="black" />
<ellipse cx="30" cy="60" rx="12" ry="12" fill="white" />
<ellipse cx="30" cy="60" rx="4" ry="4" fill="gray" stroke-width="1" />
<ellipse cx="140" cy="60" rx="15" ry="15" fill="black" />
<ellipse cx="140" cy="60" rx="12" ry="12" fill="white" />
<ellipse cx="140" cy="60" rx="4" ry="4" fill="gray" stroke-width="1"/>
<!-- Trunk -->
<path d="M 45,35 C 35,35  20,35 10,50"  fill="none"/>
<line x1="10" y1="50" x2="15" y2="60" />
<!-- Hood -->
<path d="M 45,35 C 30,10  35,10 100,15"  fill="none" stroke-width="2"/>
<path d="M 55,40 C 50,15  35,15 100,15"  fill="none" stroke-width="2"/>
<!-- Glass separator-->
<line x1="75" y1="40" x2="70" y2="15" />
<!-- Ad -->
<text x="60" y="53" font-size="14"></text>
</g>
</svg>

Холсты

Исходный код JavaScript:

<canvas id="solcar" width="400" height="100"></canvas>

<script src="code/scriptolcanvas.js"></script>
<script src="car.js"></script>

<script>
 var ctx = canvasInit("solcar")
 SVGtoCanvas(car, ctx, 0, 0)
</script>

Ранее мы производили файл car.js из car.svg со скриптом svgtojs.js

Как изображение отображается в теге canvas

Вот исходный код функции SVGtoCanvas:

function SVGtoCanvas(el, ctx, xo, yo) {
    var tag 
    var x, x2, y, y2, cx, cy, rx, ry, w, h
    var data, font, arr, path
    var fillFlag=false
    ctx.save()  
    ctx.beginPath()  
    for(var att in el) {
       var val = el[att]
       switch(att) {
       case 'tag':
            tag = val
            break
       case 'data':
            data = val            
       case 'stroke':
            ctx.strokeStyle=val
            break
       case 'stroke-width':
            ctx.lineWidth=val
            break
       case 'fillStyle':
       case 'fill':
            if(val=="none") val="transparent"
            ctx.fillStyle=val
            fillFlag=true
            break                
       case 'x':
       case 'x1':
            x = Number(val) + xo
            break
      ... etc...
      } 
    }
    switch(tag) {
        case 'line':
            ctx.moveTo(x,y)
            ctx.lineTo(x2,y2)
            ctx.stroke()
            break;
        case 'circle':
            ctx.arc(cx, cy, rx, 0, 2 * Math.PI);
            ctx.stroke();                
            break;
       ... etc...
   }
   ctx.restore()        
}

Полный код находится в архиве для скачивания.
Все компиляторы умеют оптимизировать структуры коммутаторов... флажок, что делает отображение изображения чрезвычайно быстрым.

Команды canvas API еще не все реализованы, поэтому код выложен в сеть на GitHub: его легко дополнить и при необходимости поделиться изменениями.

Читайте также: Конвертировать SVG в JSON.