Question

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

我的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处添加了停止点，然后我尝试在相同的空格处绘制刻度线。刻度线向左偏移几个像素，我不明白为什么。这只在大的渐变中很明显，在小的渐变（如300px x 300px）中，刻度线似乎位于正确的位置。

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

Answer 1

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

画布将线条与线性渐变颜色停止对齐

1 个答案: