• <!DOCTYPE html>  

    <html>

        <head>

     <script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script> 

     <link rel="stylesheet" type="text/css" href="style.css" />

     <script src="canvas.js"></script>

        </head>

        <body>

     

     

    <div id="container">

     

         <div class="element">

            <div class="sliders yui3-skin-sam">     <!--first square -->

        <dl>

            <dt>R: <span id="r-val" class="val"></span></dt><dd id="r-slider"></dd>

            <dt>G: <span id="g-val" class="val"></span></dt><dd id="g-slider"></dd>

            <dt>B: <span id="b-val" class="val"></span></dt><dd id="b-slider"></dd>

        </dl>

    </div>

    <div id="one" class="color"></div>

     

    </div>

     

         <div class="element">

            <div class="sliders yui3-skin-sam">       <!--second square -->

        <dl>

            <dt>R: <span id="r-val2" class="val"></span></dt><dd id="r-slider2"></dd>

            <dt>G: <span id="g-val2" class="val"></span></dt><dd id="g-slider2"></dd>

            <dt>B: <span id="b-val2" class="val"></span></dt><dd id="b-slider2"></dd>

        </dl>

    </div>

    <div id="two" class="color"></div>

    </div>

    <br>

         <div class="element">

            <div class="sliders yui3-skin-sam">       <!--third square -->

        <dl>

            <dt>R: <span id="r-val3" class="val"></span></dt><dd id="r-slider3"></dd>

            <dt>G: <span id="g-val3" class="val"></span></dt><dd id="g-slider3"></dd>

            <dt>B: <span id="b-val3" class="val"></span></dt><dd id="b-slider3"></dd>

        </dl>

    </div>

    <div id="three" class="color"></div>

    </div>

         <div class="element">

     

            <div class="sliders yui3-skin-sam">       <!--fourth square -->

        <dl>

            <dt>R: <span id="r-val4" class="val"></span></dt><dd id="r-slider4"></dd>

            <dt>G: <span id="g-val4" class="val"></span></dt><dd id="g-slider4"></dd>

            <dt>B: <span id="b-val4" class="val"></span></dt><dd id="b-slider4"></dd>

        </dl>

        </div>

     

    <div id="four" class="color"></div>

    </div>

    </div>

     

    <canvas id="canvas1" width="500" height="500">    <!--grid -->

    Requiert un navigateur récent: Internet Explorer 9, Chrome, Firefox, Safari.

    </canvas>

     

    <div id="five" class="color">

            <div class="sliders yui3-skin-sam" id="last">

        <dl>

            <dt>R: <span id="r-val5" class="val"></span></dt><dd id="r-slider5"></dd>

            <dt>G: <span id="g-val5" class="val"></span></dt><dd id="g-slider5"></dd>

            <dt>B: <span id="b-val5" class="val"></span></dt><dd id="b-slider5"></dd>

        </dl>

    </div>

    </div>

     

     

            <script>

     

                YUI().use('slider', 'color', function(Y){

     window.onload=rectangle;

     

     

         // square1

     

     

                    // sliders

        var rSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            gSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            bSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

     

     

            // slider values

            rVal = Y.one('#r-val'),

            gVal = Y.one('#g-val'),

            bVal = Y.one('#b-val'),

     

            // color chip

            color = Y.one('.color');

     

        // render sliders

        rSlider.render('#r-slider');

        gSlider.render('#g-slider');

        bSlider.render('#b-slider');

     

     

     

     

                    // register update events

        rSlider.after('thumbMove', function(e) {

            rVal.set('text', rSlider.get('value'));

            updateColors();

        });

        gSlider.after('thumbMove', function(e) {

            gVal.set('text', gSlider.get('value'));

            updateColors();

        });

        bSlider.after('thumbMove', function(e) {

            bVal.set('text', bSlider.get('value'));

            updateColors();

        });

     

     

     

     

     

        // update the colors strings

        function updateColors() {

     test=0;

            var r = rSlider.get('value'),

                g = gSlider.get('value'),

                b = bSlider.get('value');

            rgbStr = Y.Color.fromArray([r,g,b], Y.Color.TYPES.RGB);

            color.setStyle('backgroundColor', rgbStr);

        }

     

     

     

                rectangle()

        rVal.set('text', rSlider.get('value'));

        gVal.set('text', gSlider.get('value'));

        bVal.set('text', bSlider.get('value'));

     updateColors();

     

     

     // square2

     

     

     

                    // sliders

        var rSlider2 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            gSlider2 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            bSlider2 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

     

            // slider values 

            rVal2 = Y.one('#r-val2'),

            gVal2 = Y.one('#g-val2'),

            bVal2 = Y.one('#b-val2'),

     

     

            // color chip  

            color2 = Y.one('.color2');

     

        // render sliders  

        rSlider2.render('#r-slider2');

        gSlider2.render('#g-slider2');

        bSlider2.render('#b-slider2');

     

     

                    // register update events

        rSlider2.after('thumbMove', function(e) {

            rVal2.set('text', rSlider2.get('value'));

            updateColors2();

        });

        gSlider2.after('thumbMove', function(e) {

            gVal2.set('text', gSlider2.get('value'));

            updateColors2();

        });

        bSlider2.after('thumbMove', function(e) {

            bVal2.set('text', bSlider2.get('value'));

            updateColors2();

        });

     

        // update the colors strings

        function updateColors2() {

            var r2 = rSlider2.get('value'),

                g2 = gSlider2.get('value'),

                b2 = bSlider2.get('value');

     var bgColor = "rgb(" + r2 + "," + g2 + "," + b2 + ")";

               // rgbStr2 = Y.Color.fromArray([155,22,32], Y.Color.TYPES.RGB);

     document.getElementById("two").style.backgroundColor = bgColor;

            //color2.setStyle('backgroundColor', rgbStr2);

     

        }

     

     

                

        rVal2.set('text', rSlider2.get('value'));

        gVal2.set('text', gSlider2.get('value'));

        bVal2.set('text', bSlider2.get('value'));

        updateColors2();

        

        

        

        

        

     // square3

     

     

     

                    // sliders

        var rSlider3 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            gSlider3 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            bSlider3 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

     

            // slider values 

            rVal3 = Y.one('#r-val3'),

            gVal3 = Y.one('#g-val3'),

            bVal3 = Y.one('#b-val3'),

     

     

            // color chip 

            color3 = Y.one('.color3');

     

        // render sliders 

        rSlider3.render('#r-slider3');

        gSlider3.render('#g-slider3');

        bSlider3.render('#b-slider3');

     

     

                    // register update events

        rSlider3.after('thumbMove', function(e) {

            rVal3.set('text', rSlider3.get('value'));

            updateColors3();

        });

        gSlider3.after('thumbMove', function(e) {

            gVal3.set('text', gSlider3.get('value'));

            updateColors3();

        });

        bSlider3.after('thumbMove', function(e) {

            bVal3.set('text', bSlider3.get('value'));

            updateColors3();

        });

     

        // update the colors strings

        function updateColors3() {

            var r3 = rSlider3.get('value'),

                g3 = gSlider3.get('value'),

                b3 = bSlider3.get('value');

     var bgColor3 = "rgb(" + r3 + "," + g3 + "," + b3 + ")";

               // rgbStr2 = Y.Color.fromArray([155,22,32], Y.Color.TYPES.RGB);

     document.getElementById("three").style.backgroundColor = bgColor3;

            //color2.setStyle('backgroundColor', rgbStr2);

     

        }

     

     

                

        rVal3.set('text', rSlider3.get('value'));

        gVal3.set('text', gSlider3.get('value'));

        bVal3.set('text', bSlider3.get('value'));

        updateColors3();

        

        

        

        

         // square4

     

     

     

                    // sliders 

        var rSlider4 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            gSlider4 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            bSlider4 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

     

            // slider values 

            rVal4 = Y.one('#r-val4'),

            gVal4 = Y.one('#g-val4'),

            bVal4 = Y.one('#b-val4'),

     

     

            // color chip  

            color4 = Y.one('.color4');

     

        // render sliders  

        rSlider4.render('#r-slider4');

        gSlider4.render('#g-slider4');

        bSlider4.render('#b-slider4');

     

     

                    // register update events

        rSlider4.after('thumbMove', function(e) {

            rVal4.set('text', rSlider4.get('value'));

            updateColors4();

        });

        gSlider4.after('thumbMove', function(e) {

            gVal4.set('text', gSlider4.get('value'));

            updateColors4();

        });

        bSlider4.after('thumbMove', function(e) {

            bVal4.set('text', bSlider4.get('value'));

            updateColors4();

        });

     

        // update the colors strings

        function updateColors4() {

            var r4 = rSlider4.get('value'),

                g4 = gSlider4.get('value'),

                b4 = bSlider4.get('value');

     var bgColor4 = "rgb(" + r4 + "," + g4 + "," + b4 + ")";

               // rgbStr2 = Y.Color.fromArray([155,22,32], Y.Color.TYPES.RGB);

     document.getElementById("four").style.backgroundColor = bgColor4;

            //color2.setStyle('backgroundColor', rgbStr2);

     

        }

     

     

                

        rVal4.set('text', rSlider4.get('value'));

        gVal4.set('text', gSlider4.get('value'));

        bVal4.set('text', bSlider4.get('value'));

        updateColors4();

     

     

     

         // square5

     

     

     

                    // sliders 

        var rSlider5 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            gSlider5 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

            bSlider5 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

     

            // slider values 

            rVal5 = Y.one('#r-val5'),

            gVal5 = Y.one('#g-val5'),

            bVal5 = Y.one('#b-val5'),

     

     

            // color chip 

            color5 = Y.one('.color5');

     

        // render sliders  (fctne)

        rSlider5.render('#r-slider5');

        gSlider5.render('#g-slider5');

        bSlider5.render('#b-slider5');

     

     

                    // register update events

        rSlider5.after('thumbMove', function(e) {

            rVal5.set('text', rSlider5.get('value'));

            updateColors5();

        });

        gSlider5.after('thumbMove', function(e) {

            gVal5.set('text', gSlider5.get('value'));

            updateColors5();

        });

        bSlider5.after('thumbMove', function(e) {

            bVal5.set('text', bSlider5.get('value'));

            updateColors5();

        });

     

        // update the colors strings

        function updateColors5() {

            var r5 = rSlider5.get('value'),

                g5 = gSlider5.get('value'),

                b5 = bSlider5.get('value');

     var bgColor5 = "rgb(" + r5 + "," + g5 + "," + b5 + ")";

               // rgbStr2 = Y.Color.fromArray([155,22,32], Y.Color.TYPES.RGB);

     document.getElementById("five").style.backgroundColor = bgColor5;

            //color2.setStyle('backgroundColor', rgbStr2);

     

        }

     

     

                

        rVal5.set('text', rSlider5.get('value'));

        gVal5.set('text', gSlider5.get('value'));

        bVal5.set('text', bSlider5.get('value'));

        updateColors5();

        

        

                });

     document.write(test); 

     

     

    function rectangle()

    {

    for (let i = 0; i < 500; i++) {

     for (let j = 0; j<500; j++){

      var canvas = document.getElementById("canvas1"); 

      var context = canvas.getContext("2d");

      context.beginPath();

      if (i%2 == 0 && j%2 == 0) {

         context.fillStyle=  document.getElementById("one").style.backgroundColor ;   

      }

      if (i%2 == 1 && j%2 == 0) {

         context.fillStyle=document.getElementById("two").style.backgroundColor ;   ;   

      }

        if (i%2 == 0 && j%2 == 1) {

         context.fillStyle=document.getElementById("three").style.backgroundColor ;   ;   

      }

        if (i%2 == 1 && j%2 == 1) {

         context.fillStyle=document.getElementById("four").style.backgroundColor ;   ; 

      }

      context.lineWidth="2";   

      context.rect(i,j,1,1);

      context.fill();

     

      

      

      

       var inter = setInterval(draw, 1);    

     function draw() {

     rectangle();

             }

    }

    }

    }

     

     

     

     

            </script>

        </body>

    </html>

     


    votre commentaire