画布将线条与线性渐变色标对齐答案

【问题标题】：Canvas aligning lines to linear-gradient color stops画布将线条与线性渐变色标对齐
【发布时间】：2014-09-12 21:52:48
【问题描述】：

我一直在尝试在线性渐变的每个部分之间创建刻度，由于某种原因，我无法让它们与渐变正确对齐，数学非常简单，但它仍然偏离了非常大的几个像素渐变。

我的 HTML：

<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="canvas.js"></script>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="1300" height="300"></canvas>
</body>
</html>

canvas.js：

$(document).ready(function() {
    var canvas= $("canvas")[0];
    var canvasWidth= $("canvas").innerWidth();
    var canvasHeight= $("canvas").innerHeight();
    var ctx = canvas.getContext("2d");
    var size= [0, 0, canvasWidth, canvasHeight/2];

    var grad = ctx.createLinearGradient(size[0],size[1],size[2],0);
    ctx.lineWidth= 2;
    grad.addColorStop(0, 'green');
    grad.addColorStop(0.5, 'green');
    grad.addColorStop(0.5, 'yellow');
    grad.addColorStop(0.8, 'yellow');
    grad.addColorStop(0.8, 'red');
    grad.addColorStop(1, 'red');
    ctx.fillStyle = grad;   
    ctx.fillRect(size[0], size[1], size[2], size[3]);


    ctx.translate(0, canvasHeight/2);
    ctx.strokeStyle= "black";

    ctx.beginPath();
    ctx.moveTo(canvasWidth*0.5, -6);
    ctx.lineTo(canvasWidth*0.5, 6);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(canvasWidth*0.8, -6);
    ctx.lineTo(canvasWidth*0.8, 6);
    ctx.stroke();
});

代码也在fiddle中

如您所见，我使用 createLinearGradient 方法创建了 3 个颜色部分，我在 0.5 和 0.8 添加了停靠点，然后我尝试在这些相同的空间绘制刻度。刻度线向左错位了几个像素，我不知道为什么。这仅在大渐变中很明显，在小渐变中（例如 300 像素 x 300 像素），刻度似乎在正确的位置。

注意：我必须使用线性渐变，不能更改为简单的彩色矩形。我希望能够使用相同的代码定义渐变以及纯色部分（只需更改色标）。

【问题讨论】：

我确认您的发现。顺便说一句，不希望的偏移量在不同的浏览器中是不同的。我会说不需要的偏移量取决于色标中百分比的使用与线条图中像素坐标的用户。我想不出一种方法来调和方差并使渐变和线条对齐。 :-/
@markE 我在 Opera 12（presto 引擎）和 firefox 中测试过，似乎没问题，看来这是一个 webkit/blnk 错误

标签： javascript html canvas

【解决方案1】：

这似乎是一个特定于 webkit 的错误。小提琴在 Firefox、IE11 和 Opera 12（presto 引擎）中正确呈现。我填写了bug report 到铬。

【讨论】：