__イタリックテキスト__HTML5を参考書で勉強しています。
以下のコードのグラデーションのところがよくわかりません教えてもらえませんか。
自分で調べたことをコメントを入れながら、やってみたのですが特に
「var grad = context.createLinearGradient(0, 0, 0, -h);」から
「grad.addColorStop(0.6, "rgba(0, 0, 0, 0)");」までのところが分かりません。
コメントの間違いがあると思いますのでそれのチェックも、お願いできればありがたいのですが、よろしくお願いいたします。
<!doctype html> <html> <head> <title>Sample 8-1-11 反射効果</title> <meta charset="utf-8"> </head> <body> <script type="text/javascript"> window.onload = function () { var context = document.getElementById("myCanvas").getContext("2d"); var img = document.getElementById("upun"); context.drawImage(img, 40, 14, 192, 144); // Cancasに通常どおりにイメージを表示している // (x,y)=(40, 14)の左上から幅192, 高さ144で描画している // context.drawImage(画像,X1,Y1,W1,H1) // 画像を指定した座標に、幅と高さも指定して描画する // W1は画像を描画する際の幅、H1は描画する際の高さ shadowImage(40, 162, 192, 144); // 反射イメージを表示するshadowImage関数を呼び出している context.globalCompositeOperation = "destination-over"; // 描画先が不透明な場合、描画先を表示。それ以外は描画内容を表示する context.fillStyle = "black"; context.fillRect(0, 0, 320, 240); function shadowImage(x, y, w, h) { // 高さを元のイメージの0.6倍にして、上下反転したイメージを表示します context.save(); // save() メソッドは、現在の描画状態のコピーを、 // 描画状態のスタックの最後に加えなければいけません。 context.translate(x, y); context.scale(1, -0.6); // var grad = context.createLinearGradient(0, 0, 0, -h); // (x,y)=(0,0)から(x,y)=(0,ーh)までグラデーションする // JavaScriptの、CanvasRenderingContext2DオブジェクトのcreateLinearGradient()は、 // キャンパスに線形的なグラデーションを描画するためのCanvasGradientオブジェクトを取得するプロパティです。 // 引数には、開始点のX座標、Y座標と終了点のX座標、Y座標を示す4つの数値を指定します。 // 開始点と終了点によってグラデーションの範囲を決めるとともに「方角を決める」という点を意識すると分かりやすいと思います。 // このオブジェクトに別途、addColorStop()で色を加えることで線形グラデーションの材料が完成します。 // その材料は、値として、fill()などに指定できます。 grad.addColorStop(0, "rgba(0, 0, 0, 0.6)"); // rgba()は、RGBAカラーモデルで色を指定する際に使用します。 // RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったものです。 alphaは色の透明度を表します。 // RGBAカラーモデルで色を指定する際には、カンマ( , )区切りにした3つの数値でRGBの色を指定した後に、 // 数値で透明度を指定します。 RGBの色は0-255、または、0%-100%で指定します。 // 透明度は、0(完全に透明)~1(完全に不透明)の数値で指定します。 // 色は黒で、透明度0.6,始点 // イメージの上部 が不透明で grad.addColorStop(0.6, "rgba(0, 0, 0, 0)"); // 色は黒で、透明度0 , // イメージの下部 が透明で context.fillStyle = grad; context.fillRect(0, -h, w, h); // (x,y)=(0, -h),(x,y)=(0, h)まで下から上に描画する context.globalCompositeOperation = "source-atop"; // 描画先と描画内容の両方が不透明な場合は描画内容を表示する // 描画先が不透明で、描画内容が透明な場合は描画先を表示する、それ以外は透明 context.drawImage(img, 0, -h, w, h); // 描画は下から上にされる // (0, -h)から上に幅w, 高さhで描画される // 最初にcontext.save()された描画から表示されるので、逆さに表示される context.restore(); // スタックの最後の状態を抜き出し、その状態をコンテキストに復元します。 } }; </script> <style type="text/css"> #myCanvas { border: 1px solid black } #upun { display: none } </style> <canvas width="320" height="240" id="myCanvas"> お使いのブラウザではCanvasを利用いただくことができません </canvas><img id="upun" src="upun.png"> </body> </html>
canvasに特化した話であれば、「canvas」タグをつけたほうがいいでしょう。
はいそういたします。
回答1件
あなたの回答
tips
プレビュー