Weitere ähnliche Inhalte Ähnlich wie Web Vector Graphics (20) Mehr von Dmitry Baranovskiy (15) Kürzlich hochgeladen (20) Web Vector Graphics13. <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<!DOCTYPE svg PUBLIC quot;-//W3C//DTD SVG 1.1//ENquot; quot;http://www.w3.org/
Graphics/SVG/1.1/DTD/svg11.dtdquot;>
<svg version=quot;1.1quot; xmlns=quot;http://www.w3.org/2000/svgquot;
xmlns:xlink=quot;http://www.w3.org/1999/xlinkquot;>
<rect fill=quot;#333quot; width=quot;426quot; height=quot;260.667quot;/>
<ellipse cx=quot;213quot; cy=quot;130quot; rx=quot;205quot; ry=quot;117quot;>
<animate attributeName=quot;fillquot; attributeType=quot;CSSquot;
begin=quot;0squot; dur=quot;6squot; fill=quot;freezequot;
from=quot;#000quot; to=quot;#f00quot;/>
<animate attributeName=quot;rxquot; begin=quot;0squot; dur=quot;6squot;
fill=quot;freezequot; from=quot;205quot; to=quot;117quot;/>
</ellipse>
<path fill=quot;nonequot; stroke=quot;#fffquot; stroke-width=quot;5quot;
stroke-linecap=quot;roundquot;
d=quot;M24.397,99.601c0,0,12.537,0,16.805,0s10.137,
5.869,10.137,5.869s16.273,43.75,18.94,49.885 ...
s-1.601,63.224,12.805,63.224h28.01quot;/>
</svg>
16. window.onload = function () {
var elem = document.createElement(quot;canvasquot;);
elem.width = 500;
elem.height = 500;
document.body.appendChild( elem );
var context = elem.getContext(quot;2dquot;);
context.fillRect(0, 0, elem.width, elem.height);
var pos = 0, dir = 1;
setInterval(function () {
context.rotate( 15 );
context.fillStyle = quot;rgba(0,0,0,0.05)quot;;
context.fillRect(0, 0, elem.width, elem.height);
context.fillStyle = quot;rgba(255, 0, 0, 1)quot;;
context.fillRect(pos, pos, 20, 20);
pos += dir;
if ( pos > elem.width ) {
dir = -1;
} else if ( pos + 20 < 0 ) {
dir = 1;
}
}, 10);
};
30. Tests:
SVG 178 : http://www.w3.org/Graphics/SVG/Test/20061213/
htmlObjectHarness/full index.html
Canvas 672 : http://philip.html5.org/tests/canvas/suite/tests/
31. 203
118
469
160
Canvas SVG
64%
32. 182 60
490 218
Canvas SVG
76%
34. 30
184
248
488
Canvas SVG
81%
51. Canvas SVG VML
JavaScript off
CSS
Result pixels DOM DOM
Animation
Filters
Image Data
Text
Stand alone
Easy to use
59. ExCanvas.js
!
mooCanvas.js
http://excanvas.sourceforge.net/
http://ibolmo.com/projects/moocanvas/