Question

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

我没有为相关的上下文属性(shadowBlur, shadowOffsetY, etc.)设置任何正值，那么是什么给出了？

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

在显示画布时与缩放有关。您的原始片段具有非常小的渐变并按比例缩放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);

相同的代码，但这次画布使用嵌入式样式扩展：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/

html canvas shadow / blur不会消失

1 个答案: