gpt4 book ai didi

javascript - HTML Canvas 上的第一行具有不同的宽度

转载 作者:行者123 更新时间:2023-12-01 04:07:09 27 4
gpt4 key购买 nike

Canvas 上的第一行具有不同的宽度。我不明白为什么。有人可以帮忙吗?

var x = document.documentElement.clientWidth;
var y = document.documentElement.clientHeight;

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.lineWidth = 25;

context.beginPath();
context.moveTo(0, 0);
context.lineTo(x, 0);
context.strokeStyle = '#2f444f';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(0, 25);
context.lineTo(x, 25);
context.strokeStyle = '#ff0000';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(0, 50);
context.lineTo(x, 50);
context.strokeStyle = '#5f0000';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(0, 75);
context.lineTo(x, 75);
context.strokeStyle = '#9f0000';
context.stroke();
context.closePath();
<body>
<canvas id="myCanvas" width="1360" height="640" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

</body>

最佳答案

因为线条位于 y==0,所以宽度的一半会超出 Canvas ,因此您会得到更细的线条。

var x = document.documentElement.clientWidth;
var y = document.documentElement.clientHeight;

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.lineWidth = 25;
var w2 = Math.floor(context.lineWidth / 2);

context.beginPath();
context.moveTo(0, w2);
context.lineTo(x, w2);
context.strokeStyle = '#2f444f';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(0, 25 + w2);
context.lineTo(x, 25 + w2);
context.strokeStyle = '#ff0000';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(0, 50 + w2);
context.lineTo(x, 50 + w2);
context.strokeStyle = '#5f0000';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(0, 75 + w2);
context.lineTo(x, 75 + w2);
context.strokeStyle = '#9f0000';
context.stroke();
context.closePath();
<body>
<canvas id="myCanvas" width="1360" height="640" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

</body>

关于javascript - HTML Canvas 上的第一行具有不同的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41729895/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com