canvas边框问题
Posted bgwhite
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于canvas边框问题的主要内容，如果未能解决你的问题，请参考以下文章