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 六个复式二中二 时时彩赢彩专家标准版 中信积分彩票是真的么 北京时时开奖号 球探体育比分手机版 500彩软件真的假的 双色球复合式是什么意思 新号送分的打鱼10000 红财神关三肖今期彩图 江西时时怎么停的 欢乐生肖彩票平台 快三开奖查询 21点规则视频 时时彩组六56注万能码 pk10前五人工计划 至尊国际娱乐游戏网址