Ai to Canvas Plug-Invisitmix.com
Microsofts Illustrator-zu-Canvas-Export-Plugin. Konvertiert auch Animationen. Die Demo-Videos setzen natürlich Silverlight vorraus /:>
7 Posts getaggt mit javascriptx, canvasx
-
31 Days of Canvas Tutorialscreativejs.comvor 181 Tagen12.08.2011 02:04:39
-
vor 479 Tagen17.10.2010 21:57:14 -
Three.jsgithub.comJavaScript 3D Engine. Rendert mit
canvas,svgoder WebGL. Hardwarebeschleunigtes canvas kann nicht früh genug kommen.vor 506 Tagen20.09.2010 19:02:46 -
vor 535 Tagen23.08.2010 01:21:10
-
JavaScript Gamingjavascriptgaming.comLustige JavaScript-
<canvas>-Spiele und ein paar passende Tutorials.Z.B. Super Mario Kart mit fake mode7-Grafik und Sound, 3D-Tetris oder das erstaunlich smoothe Canvascape.
vor 702 Tagen09.03.2010 05:38:23 -
A simple drawing program using Javascript and Canvasstevehanov.ca<canvas>-Vektor-Malprogramm mit Linien, die wie handgemalt aussehen (also leicht verwackelt). Man kann die Formen skalieren und drehen und auch einzelne Punkte von Kurven verändern. Sehr cool.vor 771 Tagen30.12.2009 01:04:22 -
Smooth path in canvas
Ich spiel grad mit
<canvas>rum und wollte eine Kurve möglichst fließend durch Punkte führen:
Viele Algorithmen laufen entweder nicht durch jeden Punkt oder setzen voraus, dass man die Pixel selbst malen will, was gerade bei Anti-Aliasing recht mühselig wird. Ich fand dann einen netten Algorithmus von Jean-Yves Quéinec, der Bézier-Splines so hinbiegt, dass eine durchgehende schöne Kurve entsteht. Manchmal gibts noch leicht merkwürdige Kurventeile aber insgesamt funktioniert es gut.
Der Code: smooth_path.js
Die Funktion bekommt ein Array von Punkten und erstellt einen Pfad, den man dann selbst malen kann.
path - Ein Punkte-Array der Form
[{x:0, y:0}, {x:10, y:10}, ...]smoothness - Der Grad der Biegung. 0 glättet nichts, 1.05 macht aus einem Quadrat einen Kreis und auch sonst schöne Kurven, alles andere erzeugt lustige Formen.
joinPath - Falls
truewerden die Kurven am Anfang und Ende des Pfades aufeinander ausgerichtet, sodass eine durchgehende Form entsteht, wenn Anfangs- und Endpunkt aufeinander liegen.c - der
canvas-Kontext
Wer Fehler findet oder Verbesserungen hat, immer her damit :)
Beispiel:
var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); var path = [{x: 100, y: 100}, {x: 20, y: 150}, {x: 200, y: 200}, {x: 100, y: 100}]; var smoothness = 1.05; var joinPath = true; c.beginPath(); smoothPath(path, smoothness, joinPath, c); c.stroke(); c.closePath();
Und eine kleine Demo. Per Maus die Punkte setzen, mit dem Slider die smoothness verändern.
vor 882 Tagen09.09.2009 21:01:33
Neue Kommentare
Wie soll man sich die entstehung des Bildes vorstellen?
Die Frau hat auf dem Sofa gelegen.
Währenddessen hat der Maler die abstrakte Kunst produziert.
Dann sieht sich das Modell das Bild an, das aber nur ein "Köder" für das eigentliche Bild war, das er dann noch schnell malt.
Die springende textarea tut dies nicht mehr im neuen Design. Hab ich bald fertig.
--wait=5 // wartet 5 Sekunden zwischen jedem Request (empfolen)
--random-wait // variert die Wartezeit (damits nicht so auffällig ist ;)
--limit-rate=300k // limitiert Bandbreite auf 300KB/s
[P.S.: Die Textarea fliegt immer noch ganz nach unten (unter die Tags) bei schmalen Browserfensterchen.]
http://selflinux.org/selflinux/html/vim.html
Merkwürdig. Der Link ist eigentlich korrekt, aber wenn ich draufklicke, werde ich nach
http://navigationshilfe1.t-online.de/dnserror?url=http://www.cosolit.deselflinux/
weitergeleitet.