HTML5画布绘制矩形-获得不同宽度的边框？
HTML5画布绘制矩形-获得不同宽度的边框？
提问于 2011-11-06 22:14:47
正方形边框的结果是不同的宽度，似乎右边框和下边框的宽度比左边框和上边框的宽度宽2倍。为什么这么奇怪？我希望所有边的边框都有相同的宽度。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Test</title>
<script type="text/javascript">
function draw () {
var canvas = document.getElementById('rectangle');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.lineWidth = 30;
ctx.fillStyle = "black";
ctx.fillRect(0,0,100,100);
ctx.strokeStyle = "red";
ctx.strokeRect(0,0,100,100);
ctx.restore();
}
</script>
</head>
<body onload="draw()">
<canvas id="rectangle"></canvas>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-11-06 22:21:48
这是因为你的边框在顶部和左边被截断了，因为那是画布开始的地方，如果你的矩形从(0,0)开始，那么左边框的左端的x坐标将是-30。
使起始坐标大于30 (这样边界的末端就不是负数)，它就会工作得很好。
Demo
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8027601
复制相关文章
相似问题
腾讯云开发者
