-
<!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
Suivre le flux RSS des articles
|
 Créer mon blog |
Créer mon compte |