３次元の球の描き方

赤
緑
青
H
V
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  
 <body>
<canvas id="canvas" width="360" height="243" tyle="border:1px solid #CCC;"></canvas>

<div class="example-box">
                <table>
                    <tr>
                        <th>赤</th>
                        <td><input id="slider" type="range"  min="0" max="255" oninput="this.nextSibling.value = this.value" onchange="this.nextSibling.value = this.value" /><input id="Rval" type="text" size="3" value="255" /></td>
                    </tr>
                    <tr>
                        <th>緑</th>
                        <td><input id="slider1" type="range" value="0 " min="0" max="255" oninput="this.nextSibling.value = this.value" onchange="this.nextSibling.value = this.value" /><input id="Gval" type="text" size="3" value="0 "/></td>
                    </tr>
                    <tr>
                        <th>青</th>
                        <td><input id="slider2" type="range" value="0" min="0" max="255" oninput="this.nextSibling.value = this.value" onchange="this.nextSibling.value = this.value" /><input id="Bval" type="text" size="3" value="0 "/></td>
                    </tr>
                    <tr>
                        <th>H</th>
                        <td><input id="slider3" type="range" value="200" min="150" max="250" oninput="this.nextSibling.value = this.value" onchange="this.nextSibling.value = this.value" /><input id="Hval" type="text" size="3" value="200 "/></td>
                    </tr>
                    <tr>
                        <th>V</th>
                        <td><input id="slider4" type="range" value="0" min="50" max="100" oninput="this.nextSibling.value = this.value" onchange="this.nextSibling.value = this.value" /><input id="Vval" type="text" size="3" value="75 "/></td>
                    </tr>
                </table>
            </div>

<script type="text/javascript">
let S1Slider = document.getElementById('slider');//slider1のオブジェクトを取り出す。
S1Slider.addEventListener('input', inputChange);//変化（イベント）が起きたら、inputChange関数を呼ぶ。

let S2Slider = document.getElementById('slider1');
S2Slider.addEventListener('input', inputChange);

let S3Slider = document.getElementById('slider2');
S3Slider.addEventListener('input', inputChange);

let S4Slider = document.getElementById('slider3');
S4Slider.addEventListener('input', inputChange);

let S5Slider = document.getElementById('slider4');
S5Slider.addEventListener('input', inputChange);

S1Slider.value="255";
S2Slider.value="0";
S3Slider.value="0";
S4Slider.value="200";
S5Slider.value="75";

set_up();

function set_up()
{
canvas =document.querySelector("canvas");
ctx =canvas.getContext("2d");
inputChange(event);
//GetMyValue();
//MyDraw();

}

function inputChange(event){//スライダーに変化があったら呼ばれる。
  MyRed=parseInt(S1Slider.value);//Slider.valueは文字列なので、paraseInt関数で整数に変換する。
  MyGreen=parseInt(S2Slider.value);
  MyBlue=parseInt(S3Slider.value);
  MyHol=parseInt(S4Slider.value);
  MyVer=parseInt(S5Slider.value);
  
  MyColor="rgb("+MyRed+","+MyGreen+","+MyBlue+")";

    MyDraw();
 
}






function MyDraw()
{
ctx.beginPath(); 
ctx.arc(175, 100, 100, 0, Math.PI*2, true);
var gradient2=ctx.createRadialGradient(MyHol,MyVer,10,200,75,75);
gradient2.addColorStop(0.0,"#EEEEEE");
gradient2.addColorStop(1.0,MyColor);
ctx.fillStyle = gradient2; 
ctx.fill();
}

var MyRed;
var MyGreen;
var MyBlue;
var MyHol;
var MyVer;
var MyColor;



</script>


</body>
</html>
プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング > 第2時限：美術

美術：色と光の方向

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング
