canvas 設置矩形樣式

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

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

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

首先看一段代碼實例:

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

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

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

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

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

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

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

具體參閱canvas fillStyle一章節。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
大圣捕鱼2 内蒙古快3实战走势图 全网最准一尾中特 贵州快三开奖结果走势图 排列五开奖全图 天津十一选五兑奖 香港精英三中三平特 pk10九码为什么输 云南时时走势规律图 浙江省快乐12追号推荐 2码重特大公开 网球比分捷报网 四川福彩快乐12官方app nba今日推荐分析 江西快3走势 快三倍投必死 幸运农场开奖结果记录