帆布對準線線性漸變色停止

我一直在試圖建立我的線性漸變的各部門之間的蜱，由於某種原因，我不能讓他們與梯度正確對齊，數學是很簡單但它是在很大的梯度下仍然有幾個像素。帆布對準線線性漸變色停止

我的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）中，蜱看起來處於正確的位置。

注：我不得不使用線性漸變，改變簡單的彩色矩形是不是一種選擇。我希望能夠使用相同的代碼定義漸變以及純色部分（只需更改顏色停止）。

來源

2014-09-12 Hoffmann

我確認你的發現。順便說一句，不同瀏覽器中不需要的偏移量是不同的。我會說不需要的偏移量取決於顏色停止中百分比與線條圖中像素座標的用戶的比例。我想不出一種方法來協調差異並使梯度和線條對齊。： -/ – markE 2014-09-13 01:21:37

@markE我在Opera 12（presto engine）和firefox中測試過，它似乎沒問題，看起來這是一個webkit/blnk bug – Hoffmann 2014-09-13 19:54:46

這似乎是WebKit的特定錯誤。小提琴可以在Firefox，IE11和Opera 12中正確渲染（presto引擎）。我填寫了一個bug report鉻。

來源

2014-09-15 15:58:42 Hoffmann

帆布對準線線性漸變色停止

回答

相關問題