Gewusst wie: zeichnen von Rahmen um die Leinwand

Ich bin zeichnen Sie ein Bild auf eine Leinwand mit einem weißen hintergrund Farbe. Ich will zeichnen Sie einen Rahmen um die Leinwand und ich bin nicht in der Lage, dies zu tun. Hier ist mein code:

canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
context.fillText(chartId, 0, 50);
context.drawImage(image, 0, 0);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);//for white background

danach will ich einen roten Rahmen angezeigt um die gesamte Leinwand.

  • scheint nicht zu funktionieren,ich sehe keine Grenze
  • Ok, canvas.style.border = '1px solid red'; ist nur das hinzufügen einer CSS-Rahmen um die Leinwand, nicht zeichnen Sie es auf. Sehen Sie es in Aktion
InformationsquelleAutor ValarDohaeris | 2015-06-25
  1. 3

    Set context.lineWidth zu 2 legen context.strokeStyle zu #FF0000", und verwenden Sie context.strokeRect, nicht fillRect.
    globalCompositeOperation wenn destination-over, dann neu beantragen, was wird die Leinwand Wert, so ändern source-over. Verwendet lightblue zu fake die drawImage im code

    JS:

    var canvas = document.getElementById('cv');
canvas.width = 400;
canvas.height = 300;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
context.fillText('ASD', 0, 50);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#00FFFF";
context.fillRect(0,0,canvas.width,canvas.height);//for white background
context.globalCompositeOperation = "source-over";
context.lineWidth = 2;
context.strokeStyle="#FF0000";
context.strokeRect(0, 0, canvas.width, canvas.height);//for white background

    HTML:

    <canvas id="cv"></canvas>

    • Was ist, wenn ich will, um die Grenzen skizzieren? Fox Beispiel: Breite:100 Höhe:100 border-width:5 Final Größe: Breite:110 Höhe:110 vielen Dank im Voraus, Chris Pappas
    • Ich bin nicht sicher, ob ich Ihre Frage, wenn Sie meinen, Sie wollen eine Grenze, die außerhalb der Leinwand, warum nicht einfach eine css-border statt, Beispiel
    • das problem ist, wenn Sie zum herunterladen des canvas Inhalt als Bild der Grenze nicht im Lieferumfang enthalten
    InformationsquelleAutor fuyushimoya
Schreibe einen Kommentar