Element HTML5 canvas - HEH

Transcription

Element HTML5 canvas
Écrit par gryA
Dimanche, 19 Mai 2013 06:52 - Mis à jour Mardi, 30 Septembre 2014 15:00
Canvas Template
1 / 15
Écrit par gryA
PROJET ANIMATION CARTE DE VOEUX CLIQUEZ ICI
finalisation animation carte de voeux HEH cliquez ici
2 / 15
Écrit par gryA
<!doctype html>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do stuff here
</script>
</body>
---------------------------------------------------------------------------------------------
3 / 15
Écrit par gryA
01-skeleton.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function () {
//Our code here...
};
</script>
</body>
</html>
----------------------------------------------------------------------------------------------
Forme canonique
<!DOCTYPE html>
4 / 15
Écrit par gryA
<html>
<head>
</head>
<body>
(<body onload="init();">)
<canvas id="game" width="640" height="500">
Oh non ! Votre navigateur ne reconnait pas la balise<canvas>.
</canvas>
<script>
</script>
5 / 15
Écrit par gryA
// La fonction principale pour initialiser le tout
(function init() {)
// Récupérer le canvas à partir de son id
canvas = document.getElementById('game');
// Définir les dimensions de l'objet créé dans le canvas
height = canvas.height;
width = canvas.width;
// Une variable utilisée pour dessiner l'objet actuel
6 / 15
Écrit par gryA
draw = canvas.getContext('2d');
(})
</body>
</html>
---------------------------------------------------------------------------------------
squelette avec btn
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Canvas</title>
<style type="text/css">
7 / 15
Écrit par gryA
body {
padding:100px;
background:#ffffff;
}
</style>
<script type="text/javascript">
var canvas=null;
var context=null;
window.onload = function() {
canvas=document.getElementById("drawing");
context=canvas.getContext("2d");
context.beginPath(); //This initiates the border
context.rect(100,60,175,70);
context.fillStyle="#ffffff";
context.fill();
context.lineWidth=1; //This sets the width of the border
context.strokeStyle="#000000"; //This sets the color of the border
context.stroke();
}
function BlueRect () {
context.fillStyle="#701be0"; // This changes the rectangle to blue
context.fill();
context.strokeStyle="#000000";
context.stroke();
}
function ImgClr () {
context.clearRect(0,0, canvas.width, canvas.height); //This function clears the whole canvas
area
} </script>
</head>
<body>
<p>Interactive Canvas</p>
<canvas id="drawing" style=""> </canvas>
<p>Click on the buttons below to change the color of the rectangle. </p>
8 / 15
Écrit par gryA
<input value="Blue" id="blue" onclick="BlueRect()" type="button">
<input value="Click to clear canvas" id="clear" onclick="ImgClr()" type="button">
</body>
</html>
---------------------------------------------------------------------------------------
http://animateyourhtml5.appspot.com/
--------------------------------------------------------------------------------------
http://codular.com/animation-with-html5-canvas
ok clair mais il faut un bord au canvas
http://codular.com/beginner-html5-canvas
http://codular.com/more-html5-canvas
9 / 15
Écrit par gryA
---------------------------------------------------------------------------------------
http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ for beginner
http://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/ for advanced
---------------------------------------------------------------------------------------
http://www.developphp.com/list_html_video.php#HTML5_Canvas
HTML5 Canvas
HTML5 Canvas Tag Tutorial Learn to Draw and Animate Using Javascript
HTML5 Canvas Tutorial Draw Lines and Filled Shapes Using Javascript
HTML5 Canvas Fallback Content Tutorial Show Alternate Content No Browser Support
HTML5 Canvas Animation Basics Tutorial For Beginners
10 / 15
Écrit par gryA
---------------------------------------------------------------------------------------
L'interactivité avec HTML5 Canvas
http://inserthtml.developpez.com/tutoriels/javascript/interactivite-avec-balise-html5-canvas/
Dans cet article, nous allons considérer le problème de l'interactivité et comment l'utiliser avec
les balises HTML5 <canvas>. Vous pourrez utiliser ces informations pour créer un jeu HTML5
simple.
------------------------------------------------------------------------------------Game Development with Javascript and the canvas element
http://www.brighthub.com/internet/web-development/articles/38364.aspx
11 / 15
Écrit par gryA
This series will show you how to create a simple platform game with JavaScript and the new
canvas element. With step by step examples, source code and live online demos you can see
the power that the canvas element gives to web developers.
1. An Introduction to the Canvas Element
2. Drawing an Image to the Canvas with JavaScript
3. Advanced Image Manipulations with the Canvas Element
4. Parallax Scrolling with the Canvas Element
-----------------------------------------------------------------------------------------
HTML5 Canvas PHYSICS
http://labs.skookum.com/demos/barcampclt_physics/
http://physicscodes.com/bouncing-ball-simulation-in-javascript-on-html5-canvas/
http://www.canvasdemos.com/type/applications/physics-applications/
12 / 15
Écrit par gryA
--------------------------------------------------------------------------------------------
youTube
http://www.youtube.com/watch?v=vEOwgWpm3XQ
------------------------------------------------------------------------------------------------
book on line
https://www.inkling.com/read/html5-canvas-fulton-fulton-1st/chapter-5/simple-gravity-elasticityand
books
foundation HTML5 animation with javascript lienα
13 / 15
Écrit par gryA
coreHTML5Canvas li1 li2 li3
physics for game devellopers lia1 lia2 lib lic lid
COMPLEMENT
http://subprotocol.com/verlet-js/
Examples
Shapes (Hello world)
Fractal Trees
Cloth
Spiderweb
14 / 15
Écrit par gryA
15 / 15

Element HTML5 canvas - HEH

Transcription

Documents pareils

Papier photo, Kores 11962 Papier toile "CANVAS"

Paysage pres de sa maison de Fouras - Top-Art

canvas tempo 296 - Groupe MediaGraphic

Le couple « produit-marché

Lahey Catalogue ƒ1 SCALED

une catalogue boboboom 2016 2017

ballet boots