-
lineWidth
-
設置邊框的大小
-
fillStyle
-
設置div的顏色
-
strokeStyle
-
設置邊框的顏色
注：
-
邊框在不設置的情況下默認為1px 黑色，但是x，y軸的距離是以圖形的正中心為原始點，所以說在移動的過程中會向左移0.5右移0.5但是不存在0.5所以會補全，在補全的過程中顏色也就發生了變化因此，看上去就不再是1px和黑色了，如何解決：
-
我們可以通過距離x軸和y的距離為.5，也可以通過設置寬度來改變
-
邊框的距離設置和內容的距離設置順序互相調換得到的結果也是不同的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>（二）canvas邊框問題</title>
</head>
<style>
* {margin: 0;padding: 0;}
body { background-color: black; }
#c1 { background-color: #fff; }
</style>
<body>
<canvas id="c1" width="400" height="400"></canvas>
<script>
oC = document.getElementById("c1");
var ctx = oC.getContext("2d");
ctx.lineWidth = 1;//設置邊框大寫
ctx.fillStyle = "yellow";//填充實體顏色
ctx.strokeStyle = "red";//填充邊框顏色
ctx.strokeRect(50.5,50.5,100,100);//對邊框的設置
ctx.fillRect(50.5,50.5,100,100);//對內容的設置
</script>
</body>
</html>