<canvas>钻石/玻璃般的效果

Question

<canvas>钻石/玻璃般的效果

4

我正在制作一个画布动画，其中一张图片应该是一个钻石。

目前为止，我已经做到了这一步：

ctx[0].beginPath();
ctx[0].moveTo(0,-80);
ctx[0].lineTo(-60,-130);
ctx[0].lineTo(-36,-160);
ctx[0].lineTo(36,-160);
ctx[0].lineTo(60,-130);
ctx[0].closePath();
ctx[0].fillStyle = "rgba(175,175,255,0.7)";
ctx[0].fill();

这个绘制了一个简单的、淡蓝色的半透明菱形。

这太简单了，但是我遇到了严重的“颜色”问题。我猜想玻璃材质应该能解决问题，但是到目前为止我还没有找到有用的东西。如果需要，我可以添加尽可能多的代码行，但颜色是我的主要问题。

这将被预渲染，所以长而复杂的代码并不是什么大问题。但我不想使用图片。

总之：我需要一种类似玻璃的效果来渲染画布。有什么建议吗？

- zebasz

我不确定答案，但如果你在Google Images上搜索“钻石矢量”，你会发现它们主要是用黑白渐变笔画填充的。这在画布上很容易实现，也许可以帮到你。http://www.google.com/search?tbm=isch&q=diamond+vector - pimvdb

这个网站有一个很好的关于如何使用渐变的教程。http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/ - Ivan

@Ivan 谢谢。我知道如何使用渐变，但在颜色选择方面仍需要帮助。 - zebasz

@pimvdb 感谢您提供的向量想法，我之前没有想到过。我会去查看一下。 - zebasz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mindoftea · Accepted Answer

我认为您在寻找玻璃（或者说是钻石）时期望的是其不完全透明或平坦，它会反射周围环境并且轻微地畸变背景。你可以通过径向渐变来呈现反射的效果。然而畸变就比较棘手了。您可以移动和缩放对象后面的每个像素，但这将难以实现，更不用说非常慢了。另一种方法是实现一个非常细腻、快速变化的渐变，它将呈现下方像素的畸变效果，即使实际上并没有发生任何变化。

下面是一个带有反射和畸变效果的玻璃窗的实现。

<html>
<canvas id="canvas" style="position:fixed;">
</canvas>
<script type="text/javascript">
    document.getElementById("canvas").height=window.innerHeight;
    document.getElementById("canvas").width=window.innerWidth;
    ctx=document.getElementById("canvas").getContext("2d");
    textWidth=ctx.measureText("Hello World! ");
    textWidth=Math.ceil(textWidth.width);
    ctx.lineWidth=3;
    targetWidth=Math.floor(window.innerWidth/textWidth)*textWidth;
    for(i=0;i<500;i++)
    {
        ctx.fillText("Hello World! ",((i*textWidth)%(targetWidth)),(16*Math.floor((i+1)*textWidth/window.innerWidth)+16));
    }
    var glass = ctx.createRadialGradient(80,110,0,100,140,100);
    for(i=0;i<=100;i++)
    {
        redComponent=Math.round(210-(i%11));
        greenComponent=Math.round(245-(i%7));
        blueComponent=Math.round(255-(i%5));
        opacity=Math.round(((i%3)+1)*Math.sin(i/200*Math.PI)*1000)/3000;
        glass.addColorStop(i/100,"rgba("+redComponent+","+greenComponent+","+blueComponent+","+opacity+")");
    }
    glass.addColorStop(1,"rgba(0,0,0,0)")
    ctx.fillStyle=glass;
    ctx.beginPath();
    ctx.translate(100,0);
    ctx.moveTo(100,100);
    ctx.lineTo(187,150);
    ctx.lineTo(137,237);
    ctx.lineTo(50,187);
    ctx.lineTo(100,100);
    ctx.closePath;
    ctx.fill();
    ctx.stroke();
</script>
</html>

结果是：结果的图片