質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Q&A

解決済

1回答

508閲覧

グラデーションのところがよくわかりません教えてもらえませんか

退会済みユーザー

退会済みユーザー

総合スコア0

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

0グッド

0クリップ

投稿2018/10/04 08:26

編集2018/10/04 08:57

__イタリックテキスト__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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/10/04 08:35

canvasに特化した話であれば、「canvas」タグをつけたほうがいいでしょう。
退会済みユーザー

退会済みユーザー

2018/10/04 08:41

はいそういたします。
guest

回答1

0

ベストアンサー

とくにこれに加えて説明を入れることもなさそうですが、しいて言えば addColorStopメソッド二回により
「0%~60%の範囲に、不透明度が60%から0%へ変化するグラデーションをかけている」
となるでしょう。

MDNに、触れるサンプルがあるので見てみてはどうでしょうか?
https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop

投稿2018/10/04 08:52

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/10/04 09:01

ありがとうございます。見てみます。コメントはネットを移しただけなので、書いているほどよくわかっていないので、かみ砕いて、問題の個所だけでも説明していただけませんか。
退会済みユーザー

退会済みユーザー

2018/10/04 09:02

英文は苦手です。すみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問