javascript - html canvas 阴影/模糊不会消失

Question

我在窗口左上角的 Canvas 上绘制的矩形的底部和右侧有一个阴影:<强> http://thomasshouler.com/datavis/gugg/ratio.html

我没有为相关上下文属性设置任何正值(shadowBlur、shadowOffsetY等)，那么结果是什么？

Canvas 代码片段:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=0;
ctx.shadowOffsetY=0;
var width = 50;
var height = 4;
var grd=ctx.createLinearGradient(0,0,width,0);
grd.addColorStop(0,'#008000');
grd.addColorStop(0.5,'#CCCCCC');
grd.addColorStop(1,'#FF0000');
ctx.fillStyle=grd;
ctx.fillRect(0,0,width,height);

任何智慧都将不胜感激。

Answer 1

它与 Canvas 显示时的缩放有关。您的原始片段具有非常小的梯度并按比例放大 http://jsfiddle.net/CBzu4/清晰地显示出模糊的轮廓。

画得更大(确保没有CSS缩放)看起来不错:http://jsfiddle.net/CBzu4/1/代码与你的相同，只是重新排列:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var width = 50 * 8;
var height = 4 * 8;

var grd=ctx.createLinearGradient(0,0,width,0);
grd.addColorStop(0,'#008000');
grd.addColorStop(0.5,'#FFFF00');
grd.addColorStop(1,'#FF0000');

ctx.fillStyle = grd;
ctx.fillRect(5,5,width,height);

相同的代码，但这次 Canvas 按嵌入样式放大:http://jsfiddle.net/CBzu4/2/

<canvas id="myCanvas" style="border: 1px solid red; width: 120%; height: 120%;" width="600" height="80">

最终版本再次与您的相同，根本没有 css 缩放，也没有模糊的轮廓:http://jsfiddle.net/CBzu4/3/