（二）canvas边框问题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>