Transparenz eine gefüllte Kontur in HTML5

Arbeite ich an einem doodlen app in HTML5 und ich würde gerne eine Art von Eimer-Funktion. Die Idee ist, einen Pfad zu zeichnen und es wird geschlossen und gefüllt mit der gewählten Farbe (die Farbe des Strichs). Es funktioniert sehr gut mit Uni-Farben, aber wenn ich eine transparente Kontur und Fläche, die ich laufen in dieses problem: http://imgur.com/0N3MW

Was passiert, ist das füllen erfolgt, bis die Mitte des Strichs (die tatsächliche sampling-Punkt des Pfades), so gibt es eine Linie von der Hälfte der Größe des Strichs innerhalb der Form, die ist dunkler, weil es die Kreuzung der Strich-und Füllfarbe.

Sehen Sie Abhilfe für dieses?

Kann ich leider nicht posten JSFiddle jetzt, weil es auf NUR-LESE-Modus. Aber Sie sollten in der Lage sein zu sehen, was ich spreche, Leben in dieser sandbox: http://bit.ly/AbaMLl
(Die website und Bibliothek ist unabhängig von dem, was ich verwende, es ist nur eine Leinwand sanbox ich gefunden habe)

Irgendwelche Ideen/leads willkommen 🙂

InformationsquelleAutor Mathieu | 2012-02-10
  1. 11

    Sicher, verwenden Sie ctx.globalCompositeOperation = 'destination-atop'; und es sollte so Aussehen, wie Sie erwarten sind.

    Etwa so: http://jsfiddle.net/UcyX4/

    (Nehmen Sie die Zeile, um zu sehen, das problem, das Sie haben)

    Angenommen es ist nicht die einzige Sache, gezeichnet auf Leinwand, sind Sie wahrscheinlich gehen zu müssen, zeichnen Sie diese in ein temporäres canvas-Bereich und ziehen Sie dann, die Leinwand auf Ihre normale, sonst kann es ruinieren alle der zuvor gezeichneten Formen. So müssten Sie ein system wie das so: http://jsfiddle.net/dATfj/

    edit: code eingefügt bei jsfiddle Fehler:

    html:

    <canvas id="canvas1" width="500" height="500"></canvas>

    Skript:

    var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var can2 = document.createElement('canvas');
can2.width = can.width;
can2.height = can.height;
ctx2 = can2.getContext('2d');

ctx.strokeStyle = 'rgba(0,0,0,0.7)';
ctx.fillStyle = 'rgba(0,0,0,0.7)';
ctx.lineWidth = 10;


//Stuff drawn normally before
//Here I draw one rect in the old way just to show the old way
//and show something on the canvas before:
ctx.beginPath();
ctx.rect(50,50,100,100);
ctx.fill();
ctx.stroke();


//Draw on can2 then draw can2 to can
ctx2.strokeStyle = 'rgba(0,0,0,0.7)';
ctx2.fillStyle = 'rgba(0,0,0,0.7)';
ctx2.lineWidth = 10;
ctx2.beginPath();
ctx2.rect(50,250,100,100);
ctx2.globalCompositeOperation = 'destination-atop';
ctx2.fill();
ctx2.stroke();

ctx.drawImage(can2, 0, 0);
    • Leider JSFiddle gibt mir ein 404, aber ich habe versucht, die änderung der Composite-Modus und es scheint zu funktionieren. Aber Sie sind auch richtig, ich brauche zum zeichnen meiner "intermediate" Leinwand bin ich mit Formen zeichnen auf der letzten, die mit den endgültigen Formen. Ich werde versuchen zu finden, wie Sie dies tun, während JSFiddle erholt 🙂 nochmals vielen Dank!
    • Ah, ich fügte den code von der Geige nur für den Fall. Viel Glück mit Ihrem Projekt!
    • Ich half mir selbst, von diesem in der Zwischenzeit: stackoverflow.com/questions/4405336/... . Es könnte gut sein, zu erwähnen, um JQuery-Benutzer, dass, um die Art benötigt für can2 in Ihrem Beispiel, Sie haben zu tun, $("#myCanvas").get(0).getContext('2d').canvas . Es funktioniert wie ein Charme jetzt. Vielen Dank noch einmal!
    • Dies funktioniert nicht mehr (schon gar nicht auf Firefox). Ich bin derzeit auf der Suche zu einer alternative. Mehr info hier: bugzilla.mozilla.org/show_bug.cgi?id=898375
    InformationsquelleAutor Simon Sarris
  2. 4

    Simon ' s Antwort war richtig, aber es scheint jetzt, dass Chrome 36 korrigiert einen Fehler, der Auswirkungen auf seine Lösung, und es funktioniert nicht mehr. Es auch schon nicht mehr auf Firefox und es scheint zu sein, das erwartete Verhalten: https://bugzilla.mozilla.org/show_bug.cgi?id=898375

    So, wie tun Sie dies?

    Zuerst müssen Sie eine weitere Leinwand.

    Zeichnen Sie Ihren ausgefüllten und streichelte Form auf dieser Leinwand ohne Deckkraft (nicht in der Farbe und keine globalAlpha).

    Nun, ziehen, legen Sie die globalAlpha zu was auch immer Sie wollen auf Ihrem Haupt-Leinwand.

    Zeichnen Sie die erste Leinwand, die auf Ihrem Haupt.

    Legen Sie die globalAlpha, um alles, was Sie hatte auf Ihrem Haupt-Leinwand.

    Getan.

    InformationsquelleAutor Mathieu
  3. 4

    2018 Antwort : verwenden Sie context.globalAlpha

    ex : context.globalAlpha = 0.2;

    InformationsquelleAutor PhilMaGeo
Schreibe einen Kommentar