Modifier le style par javascript

<style>
p {
font-family:arial;
font-weight:bold;
}
button {
</style>
Bouton 'image' <img src="http://www.dreams.metroeve.com/wp-content/uploads/2017/03/dreams.metroeve_unnamed-1.png" width="40" height="40" onclick="myColor1()"/> colorie le texte id="p2" en bleu<br/>
Bouton 'button' <button onclick="myColor2()">Color !</button> colorie le texte id="p2" en rouge<br/>
Bouton 'svg' <svg width="20" height="10" onclick="myColor3()"><rect width="20" height="10" fill="red"><animate attributename="fill" begin="0s" dur="2s" repeatcount="indefinite" values="red;green;blue;red"/></rect></svg> colorie le texte id="p2" en orange<br/>
Bouton 'button' <button onclick="myColor4()">texte</button> colorie le rectangle svg id="rect1" en rose

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
function myColor1(){
document.getElementById("p2").style.color = "blue";
}
function myColor2(){
document.getElementById("p2").style.color = "red";
}
function myColor3(){
document.getElementById("p2").style.color = "orange";
}
function myColor4(){
document.getElementById("rect1").style.fill = "salmon";
}
function myColor5(){
document.getElementById("rect1").style.fill = "#C0C0C0";
}

</script>
<p>The paragraph above was changed by a script.</p>

<svg width="100" height="100"><rect width="100" height="100" id="rect1"/></svg>

Course Javascript

Effacer canvas

<button onclick="myRect()">Rect</button> <button onclick="myClear()">Go</button></br></br>
<canvas id="myCanvas3" width="500" height="500" style="border:1px solid #c0c0c0;">Your browser does not support the canvas element.</canvas>

<script>

var canvas = document.getElementById("myCanvas3");
var ctx = canvas.getContext("2d");

function myRect() {
ctx.beginPath();
ctx.fillStyle = 'royalblue';
ctx.rect(200,200,100,100);
ctx.fill();
}

function myClear() {
void ctx.clearRect(0, 0, 500, 500);
}


</script>          

<canvas id="myCanvas2" width="400" height="400" style="border:1px solid #c0c0c0;">Your browser does not support the canvas element.</canvas>

<script>

var canvas = document.getElementById("myCanvas2");
var ctx = canvas.getContext("2d");
var a = Math.floor(400*Math.random());
var b = Math.floor(400*Math.random());
var c = Math.floor(400*Math.random());
var d = Math.floor(400*Math.random());
var r = Math.floor(95*Math.random())+5;
var f1 = '#0FF000'
var f2 = '#FF0000'
var dx = (a + r) - (c + r);
var dy = (b + r) - (d + r);
var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < 2*r) {
var f1 = '#FF0000'
} else {
var f1 = '#0FF000'
}

ctx.beginPath();
ctx.fillStyle = f1;
ctx.arc(a,b,r,0,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = f1;
ctx.arc(c,d,r,0,2*Math.PI);
ctx.fill();

</script>

Collisions

Your browser does not support the canvas element.

en cours ...

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c0c0c0;">Your browser does not support the canvas element.</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var a = Math.floor(400*Math.random());
var b = Math.floor(400*Math.random());
var c = Math.floor(400*Math.random());
var d = Math.floor(400*Math.random());
var f1 = '#0FF000'
var f2 = '#FF0000'

if (condition) {
    block of code to be executed if the condition is true
} else {
    block of code to be executed if the condition is false
}

ctx.fillStyle = f1;
ctx.fillRect(a,b,100,100);

ctx.fillStyle = f1;
ctx.fillRect(c,d,100,100);

</script>

Collisions

See the Pen Canvas Model v1.5 by Pascal Bachmann (@precyx) on CodePen.

Mario

Mario

<svg width="400" height="250">
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQN4sUiHERRVk6GIC42PH7N4jhI0GHa_hb7bNmGTrNSeYoTzXHKGSxjeK9DkTJ9HkXCTZ384fkufYFaAdo3_m2LfWvicN9ZoTra62AGXJ5DC37a6Li8XciW5l5UzK4gMuhhcIRt-RDlA/s1600/mario1.png" x="0" y="0" width="400" height="250"/>
<g>
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NYi_Rdb-qP2ghsfCccNnyUZEl0ghZDRzpytYnNTt6iDY0bau5sITt30YFSJ80znamlGmBQpKDU_uIRNdlYFmcKfQYxdjV6HPIOSPNm9NfoVD7eW12oK7yNtVUJlUpynEkPBDQ8d2MQ/s1600/mario2.png" x="0" y="0" width="400" height="250"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 175 130;360 175 130" dur="2s" repeatCount="indefinite"/>
</g>
</svg>

La nuit de David Alvarez