2012-04-10 10 views
1

Ist es möglich, ein Bild in html5 Leinwand zu verbreiten .. wie sagen, ich habe 2,3 Formen..wie ein Rechteck ein Kreis und einige Quadrate und einige zufällige unproportionale Form .. und ich habe eine Liste von Bildern..sie sind Texturen nicht genau Farben nur Texturen und wenn ich auf eine klicken Ich möchte es in jeder Form (transformiert sich dementsprechend ohne verzerren das Finish) wahrscheinlich durch Zuordnung von Koordinaten und dann das Bild zu verbreiten oder zu multiplizieren. Gibt es eine Möglichkeit, so zu tun ?? innen html5 Leinwand natürlich es ist ein wenig schwer zu erklären, aber wenn jemand eine Idee dazu hat dann würden einige Hinweise schön ..Bild in eine Form in html5 Leinwand zu verbreiten

Grüße, Ashish

+0

Ja, es gibt eine Möglichkeit, das zu tun. Kannst du den vorhandenen Code, den du hast, posten, vorzugsweise zu jsFiddle und verlinken? – alex

+0

Nun, ich akzeptierte jede Antwort, die für mein Problem arbeitete. Ich weiß im Ernst nicht, was du hier meinst ... und @alex m die Demo auf jsfiddle..will den Link in einer Weile teilen..Thanks – ashishashen

Antwort

2

Zuerst müssen Sie die Koordinaten speichern Ihre Formen und Treffer testen Ihre Mausklicks, um Übereinstimmungen zu finden.

Um eine Form mit einem Bild zu füllen, verwenden Sie die Funktion createPattern mit dem Parameter 'repeat'. Definieren Sie die Fillstyle-Eigenschaft für Ihr Muster und füllen Sie sie entsprechend den Koordinaten Ihrer Form.

Links, die hilfreich sein können:

http://www.tutorialspoint.com/html5/canvas_pattern_shadow.htm

http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

+0

Danke ... das war hilfreich ... – ashishashen