JavaScriptの質問をしたり答えたりする掲示板

2019-01-29に作成

JavaScriptに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します!

質問は下記に沿って書いていただくと回答しやすくなります。

  • 実際のソースコードがある場合、可能な範囲で書いていただくと問題点を見つけやすくなります。
  • 実際に発生したエラーメッセージがある場合、コピペしていただくと問題解決につながる可能性が高いです。
  • 見た目上の問題の場合、スクリーンショットを貼ると状況が把握しやすくなります。
person
(匿名) #efa840ec
comment
11

首記の件、教えて頂きたく。
下記ソースコードで花びらの一枚を作成しました。
これを題名の通り花びらの角度を変えて複製する方法がありましたら教えて頂きたくお願い致します。

イメージとして添付画像の様にしたいです。
image

'use strict;'

//init
const canvas = document.getElementById('test');
const context = canvas.getContext('2d');
const WIDTH = $('#test').get(0).width = $(window).width();
const HEIGHT =$('#test').get(0).height = $(window).height();

//花びら(上)
context.beginPath();
context.moveTo(270,50);
context.quadraticCurveTo(300, 50, 260, 150);

context.moveTo(260,150);
context.quadraticCurveTo(240, 165, 230, 150);

context.quadraticCurveTo(210, 50, 230, 50);

context.moveTo(230,50);
context.lineTo(250,80);
context.lineTo(270,50);
context.lineWidth = 8;
context.strokeStyle = 'rgb(255,204,255)';
context.save();

context.moveTo(260,150);
context.quadraticCurveTo(240, 165, 230, 150);

context.quadraticCurveTo(210, 50, 230, 50);

context.moveTo(230,50);
context.lineTo(250,80);
context.lineTo(270,50);
context.stroke();


person
(匿名) #efa840ec
comment
2

題名の通り、値を変化させ続けることによってグラデーションの色を少しずつ変化させて、アニメーションの様にしたいのですがうまくできません。
やりたい事と教えて頂きたい事を分けていますが、合わせて教えて頂きたくお願い致します。

・やりたい事
1.描画の白い部分(描画が見えない部分)を上から下に少しずつ移動させたい。
2.白い部分が通過したら、通過した場所の色が元に戻るようしたい。
(下記ソースコード参照)

・教えて頂きたい事
1.addColorのオフセット値を少しずつ変化させる
2.同様にrgbの値を少しずつ変化させる
変化させたい値を変数とインクリメントを使用するというのが基本的な方法だと思うのですが、うまくできないのでご教示お願い致します。

下記は試みた事です。
addColorStopの場合
・offset値が0,1単位の為、インクリメントが使用出来ない
・対策としてfor文を使用して0.1単位で増加させようとしたが、描画に変化はない(白い部分が移動しない)
function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
for(let i = 0; i
grad.addColorStop(0.3, 'rgb(204,0,0');
grad.addColorStop(i 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(204,0,0');
}
~~~~~~~~~~~~~~~~~~

rgb値の場合
・同様に下記にて変数とインクリメントを使用するがエラーが出る
rgb値は変数は使用出来ない?下記エラー参照
エラー内容:Javascript.js:10 Uncaught DOMException: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('rgb(x,0,0') could not be parsed as a color.
(addColorStop'の実行に失敗しました:提供された値( 'rgb(x、0,0')を色として解析できませんでした。)
x = 1;
function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
context.clearRect(0,0,WIDTH,HEIGHT);
grad.addColorStop(0.3, 'rgb(x,0,0');
grad.addColorStop(0.6, 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(x,0,0');

x = x++;

~~~~~~~~~~~~~~~~

ソースコード;

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 

person
(匿名) #efa840ec
comment
4

初めて投稿させて頂きます。

javascriptでcanvasでグラデーションの色が変化するアニメーションを作成しているのですが、HSLに関してよくわからないので教えて頂きたくお願い致します。

分からない点
・記述方法がわからない
・HSLがどの分類になるのかがわからない(関数なのか、オブジェクトなのか等)
下記ソースコードの記述を見ると関数だが、javascript HSLで検索しても記述方法や何に分類されるのか見つからなかった(検索の仕方が悪いかもしれませんが)

調べてわかった事は引数が3つあり、それぞれに当てはまる
hsl(色相, 彩度, 輝度)
色相 →rad or deg?
彩度 →100%
輝度 →50%
(値は下記ソースコードより)
基本はわかるのですが、rad or deg(これが色相?)の値だったり、その前後の+だったり、カンマ区切り部分の区切り方が不明だったりと記述方法がわかりません。

下記ソースコードは他の掲示板で教えてもらった記述方法です。
11行目:  var makeColor = () => 'hsl('+ rad + 'deg, 100%, 50%)';
書き方は関数だけど関数の基本的な書き方 var makecolor () => {}のような書き方でない

もう一つは下記ソースコードにはありませんが、
ctx = canvas.getContext("2d"),
HSLcolor = (d) => 'hsl('+ d + 'deg, 100%, 60%)';
getContext('2d')の後に連続で記述している。
HSLcolorの部分は自分で名前を作成した変数なのか、それとも別の物なのかがわからない

説明分かりづらく申し訳ございませんが、教えて頂きたくお願い致します。
再度、わからないこと
・HSLの記述方法がわからない
・このHSLというものは何に分類されるのか(関数?、オブジェクト?、etc)

<script>
    var line_canvas = document.getElementById("line"); 
    var line_ctx = line_canvas.getContext("2d");

function drawFrame() {
var makeColor = () => 'hsl('+ rad + 'deg, 100%, 50%)';
var grad = line_ctx.createLinearGradient(0,0,360,240);
line_ctx.clearRect(0, 0, 450, 450);
grad.addColorStop(0.0, makeColor(deg));
grad.addColorStop(1.0, makeColor(deg +30));

line_ctx.strokeStyle = grad;

    line_ctx.beginPath(); 
    line_ctx.moveTo(100,-100);
    line_ctx.lineTo(0,200);
    line_ctx.lineTo(100,200);
    line_ctx.lineTo(50,400);
    line_ctx.lineTo(200,150);
    line_ctx.lineTo(80,150);
    line_ctx.lineTo(67,0); 
    line_ctx.stroke(); 
    line_ctx.fillStyle = grad; 
    line_ctx.fill();   
}
 var deg = 0;
 setInterval(() => {
    rad = deg % 360;
    console.log(deg);
    drawFrame(deg++);
    },33);
  </script>

タグ

投稿月

最近コメントされた投稿