DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5 canvas畫矩形時出現邊框樣式不一致的解決方法
HTML5 canvas畫矩形時出現邊框樣式不一致的解決方法
編輯:HTML5教程     
 

這兩天需要用到同事HTML5畫圖的東東,發現裡面畫矩形的函數畫出來的邊框出現了樣式不一致的問題,最後我通過一些排除法找到了問題的症結,現分享給大家。

先附上HTML5畫矩形的的代碼:
 

復制代碼 代碼如下:
<canvas id="myCanvas" width="578" height="200"></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 = 'red';
context.stroke();
</script>


你會發現執行後邊框樣式不一樣,明顯底部很細。顏色也略有不同

把context.rect(188.0, 50, 200, 100.375)修改為context.rect(188.0, 50, 200, 100)後,發現樣式就完全一致了。
由此說明:畫矩形的時候,如果裡面的參數有不是整數的話,容易導致邊框問題,所以建議大家取整後再用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved