Penyelesaian kepada gaya sempadan yang tidak konsisten apabila melukis segi empat tepat pada petua tutorial HTML5 canvas_html5

Dalam dua hari yang lalu, saya perlu menggunakan bahan lukisan HTML5 rakan sekerja saya, dan mendapati bahawa sempadan yang dilukis oleh fungsi lukisan segi empat tepat mempunyai gaya yang tidak konsisten Akhirnya, saya menemui inti masalah melalui beberapa kaedah penyelesaian masalah, dan sekarang Saya akan berkongsi dengan anda.

Mula-mula lampirkan kod untuk melukis segi empat tepat dalam HTML5:

Salin kod

Kodnya adalah seperti berikut:

('myCanvas') ;
var context = canvas.getContext('2d');

context.beginPath(); );
context.fillStyle = 'white';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'red'; ;
< ;/script>


Anda akan mendapati bahawa gaya sempadan berbeza selepas pelaksanaan, dan bahagian bawahnya jelas sangat nipis. Warnanya juga sedikit berbeza

Selepas menukar context.rect(188.0, 50, 200, 100.375) kepada context.rect(188.0, 50, 200, 100), saya dapati bahawa gaya adalah sepenuhnya konsisten.
Ini menerangkan: Apabila melukis segi empat tepat, jika mana-mana parameter bukan integer, ia akan membawa kepada masalah sempadan dengan mudah, jadi anda disyorkan untuk membulatkannya sebelum menggunakannya.