腾讯欢乐捕鱼刷金币|腾讯欢乐捕鱼大战技巧

canvas 填充覆蓋描邊

2018-10-20 13:18| 作者: admin| 查看: 7537| 評論: 0|來自: 螞蟻部落

填充和描邊是canvas中最為基本的操作,本文不做詳細介紹。

更多內容可以參閱canvas 設置矩形樣式一章節。

但是有時候,這些操作會帶來令人奇怪的現象,比如本文將要介紹的填充覆蓋描邊。

首先看一段代碼實例:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.ofucs.tw/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.rect(10, 10, 100, 100);
  ctx.lineWidth=10;
  ctx.strokeStyle="blue";
  ctx.fillStyle="red";
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

代碼運行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/131940wzazommkvvmfvf6p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代碼分析如下:

(1).lineWidth屬性設置描邊寬度為10px,也就是邊框的厚度。

(2).fillStyle屬性設置填充顏色為紅色。

(3).很明顯邊框的描邊寬度沒有10px,也就是它很可能被填充遮蓋了。

原理很簡單,canvas繪制線條的時候,并不是沿著它的起始位置向外擴展,而是將這個起始位置作為中線向兩側擴展,這么說可能大家還不明白,具體參閱canvas lineWidth繪制原理一章節。

如果不想出現上述現象,可以采用如下解決方案:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.ofucs.tw/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.rect(10, 10, 100, 100);
  ctx.lineWidth=10;
  ctx.strokeStyle="blue";
  ctx.fillStyle="red";
  ctx.fill();
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

代碼運行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/132017vle5dmjfl13evdkv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代碼的表現已經恢復正常,很簡單只要將ctx.fill方法和ctx.stroke方法調整一下位置即可。

也就是先填充再描邊,那么描邊就會覆蓋在填充之上,后來者居上,很輕松解決此問題。

在網上也有關于此方面的解決方案,最好還是要了解出現此問題的原理。

可以做到舉一反三,而不是頭痛醫頭腳痛醫腳,僅浮在表面。

更多canvas知識可以參閱canvas教程板塊。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
腾讯欢乐捕鱼刷金币 棋牌游戏公司规定 王者棋牌app 小区丰巢快递赚钱吗 华东15选5玩法技巧 江西多乐彩彩彩乐 江苏十一选五前三走势图 土地公特码报 福利彩票开奖结果07122 iphone捕鱼大亨内购 北京快3玩法