<canvas>ダイヤモンド/ガラスのような効果

私はキャンバスのアニメーションに取り組んでいます。画像の1つはダイヤモンドであるはずです。<canvas>ダイヤモンド/ガラスのような効果

は今のところ、私は限り、このように得た：平野、ライトブルーの半透明のダイヤモンドの形を描く

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();

を。

これはあまりにも単純ですが、私は "色"に重大な問題があります。私はガラスのような何かがこのトリックをするべきだと思っていますが、これまでのところ有用なものは何も見つかりませんでした。私はそれが助けば必要なだけ多くの行を追加することができますが、色が私の主な問題です。

これはあらかじめレンダリングされているので、複雑なコードではあまり問題にはなりません。私はむしろ画像を使用したくないです。

要約すると、私はキャンバスにガラスの効果が必要です。何か案は？

出典

2011-09-16 zebasz

私は答えについてはよく分からないが、あなたがGoogle画像検索で「ダイヤモンドベクトル」を検索する場合は、あなたが/彼らは主に黒で満たされている表示されますストロークの白い勾配。これはキャンバスで簡単に行うことができるので、おそらく役立ちます。 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

私はあなたがガラス（または、恐らく、ダイヤモンド）で探しているものは、それが完全に透明であるかフラットではないと思います。代わりに、その周囲を反映し、その背景を少し歪ませる。ラジアルグラデーションを使用して反射の外観を与えることができます。しかし、歪みはよりトリッキーです。オブジェクトの後ろのピクセルを移動して拡大縮小することはできますが、それは実行するのが非常に難しくなります。あるいは、実際には何も起こっていないにもかかわらず、非常に細かく、急激に変化する勾配を実装して、その下のピクセルの歪みが現れるようにすることもできます。

ここには、反射と歪みを持つガラスのウィンドウが実装されています。

<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>

、結果は次のとおりです。 Image of Result

出典

2011-09-25 01:51:08 mindoftea

<canvas>ダイヤモンド/ガラスのような効果

答えて

関連する問題