canvas 設置矩形樣式

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

本文簡單總結一下為canvas矩形設置樣式的簡單方式。

繪制矩形的方式有多種,具體參閱canvas繪制矩形簡單介紹一章節。

首先看一段代碼實例:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.kolabortv.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.rect(10, 10, 100, 100);
  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/121912yawidzp7gkdoaqpn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代碼默認繪制一個具有描邊無填充矩形。

下面通過代碼實例分步介紹一下為此矩形添加相關樣式。

一.設置描邊:

默認描邊顏色是#000000,當然也可以自定義。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.kolabortv.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.rect(10, 10, 100, 100);
  ctx.strokeStyle="blue";
  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/121944qdd1rhlh9r6xu09u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過strokeStyle屬性可以設置描邊的顏色。

不過此屬性的功能并不僅限于設置顏色,還能夠設置漸變等效果。

具體參閱canvas strokeStyle一章節。

二.設置描邊的粗細:

描邊的粗細也可以自定義,代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.kolabortv.com/" />
<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.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

代碼運行效果截圖如下:

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

上述代碼可以將矩形描邊粗細設置為10px。

關于lineWidth屬性可以參閱canvas lineWidth繪制原理一章節。

三.設置矩形填充:

下面再來看如何設置矩形的背景樣式,也就是它的填充。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.kolabortv.com/" />
<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/122106xsvbd0yldl0dl66k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代碼將矩形使用紅色背景色填充。

但是有沒有發現一個奇怪的現象,描邊的寬度已經不是最初的10px。

這是因為描邊并不是完全向外繪制的,而是從中線向兩側繪制,填充會覆蓋內側的描邊。

具體參閱canvas lineWidth繪制原理一章節。

解決方案很簡單,具體參閱canvas 填充覆蓋描邊一章節。

fillStyle不止可以設置背景色,還可以設置漸變或者圖案等效果。

具體參閱canvas fillStyle一章節。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
亚洲骑兵 - 东方AV在线,我想看美女下面的毛,大香蕉一本道久在线 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>