Question

例如，假设我正在用箭头绘制一些圆圈，转换它并旋转（下面的代码和jsfiddle）...在给定的代码中，箭头是红色的...但是当我使它成为渐变时，渐变被转换在创建整个对象期间...所以我需要在绘制完所有内容后应用渐变...我该怎么做？

第二件事......在绘制之前将全局alpha不透明度应用于上下文时，圆上的箭头更暗，因为在同一个地方有2个图层...如何将不透明度应用于整个形状？

var x1 = 10;
var y1 = 10;
var x2 = 50;
var y2 = 50;

var dx = x2 - x1;
var dy = y2 - y1;
var radians = Math.atan2(dy, dx);
var length = Math.sqrt(dx * dx + dy * dy);

ctx.save();
ctx.translate(x1, y1);
ctx.rotate(radians);
ctx.beginPath();
ctx.arc(0, 0, 8, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = "red"; 
ctx.fill();

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(length, 0);
ctx.lineTo(length - 7, -4);
ctx.lineTo(length - 7, 4);
ctx.lineTo(length, 0);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
ctx.strokeStyle = "red";
ctx.stroke();
ctx.restore();

Answer 1

渐变旋转

当你创建LinearGradient时，你指定开始和结束的xy的

（基本上你指定渐变所遵循的线）。

因此，您可以调整该线的角度，使梯度即使在旋转后也能满足您的设计需求。

组合圈+箭头的不透明度

正如您所发现的，如果您重叠图纸，那么重叠时产生的不透明度会变暗。

你有两种暗色不透明度的解决方案：

开始在圆周上绘制箭头，而不是将箭头指向圆圈的中心。这样你就可以很小或没有重叠。
将弧线和箭头组合成1条单一路径。

HTM5从多个对象中绘制一个形状，然后填充它并设置不透明度

1 个答案: