Kommentar: Ich habe festgestellt, dass die von der Rechteckfunktion im Inneren gezogenen Grenzen inkonsistente Stile haben. Lassen Sie mich die Ideen für die Lösung des Problems mit allen teilen. Interessierte Freunde sollten es nicht verpassen.
In den letzten zwei Tagen muss ich die HTML5 -Zeichnung meines Kollegen verwenden. Ich stellte fest, dass die von der Funktion mit dem Rechteck im Inneren gezogenen Grenzen inkonsistente Stile hatten. Schließlich fand ich den Kern des Problems durch einige Ausschlussmethoden und werde sie mit Ihnen teilen.
Fügen Sie zunächst den HTML5 -Code an, um ein Rechteck zu zeichnen:
<Canvas> </canvas>
<Script>
var canvas = document.getElementById ('mycanvas');
var context = canvas.getContext ('2d');
context.beginPath ();
Context.Rect (188.0, 50, 200, 100,375);
context.FillStyle = 'White';
context.fill ();
context.linewidth = 1;
context.strokestyle = 'rot';
context.stroke ();
</script>
Sie werden feststellen, dass der Grenzstil nach der Ausführung unterschiedlich ist und der Boden offensichtlich sehr dünn ist. Die Farben sind etwas anders
Nach Änderung des Kontextes.Rect (188.0, 50, 200, 100,375) zum Kontext.Rect (188.0, 50, 200, 100) wird festgestellt, dass der Stil vollständig konsistent ist.
Dies zeigt, dass beim Zeichnen eines Rechtecks, wenn es Parameter im Inneren gibt, die keine Ganzzahlen sind, leicht Randprobleme verursachen kann. Daher wird empfohlen, dass Sie es vor der Verwendung umrunden.