Latest web development tutorials

HTML5 Canvas

<canvas> graphiques tag personnalisés, tels que des graphiques et d'autres images, vous devez utiliser un script pour dessiner des graphiques.

Dans la toile (Canvas) dessiner un rectangle rouge, rectangle dégradé, rectangles de couleur, et un texte de couleur.

Votre navigateur ne supporte pas le HTML5 élément <canvas>.

Qu'est-ce que Canvas?

HTML5 <canvas> est utilisé pour dessiner des graphiques en utilisant les scripts (habituellement JavaScript) pour terminer.

Balise <canvas> est un conteneur graphique, vous devez utiliser un script pour dessiner des graphiques.

Vous pouvez utiliser Canva dessiner des chemins, des boîtes, des cercles, des personnages, et l'ajout d'images à travers une variété de méthodes.

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome et Safari support élément <canvas>.

Remarque: Internet Explorer 8 et les versions antérieures de IE navigateur ne supporte élément <canvas>.

Créer une toile (Canvas)

Une page de toile est un rectangle est dessiné à travers le élément <canvas>.

Remarque: Par défaut, l'élément <canvas> n'a pas de frontière et le contenu.

<Canvas> Des exemples simples sont les suivantes:

<canvas id="myCanvas" width="200" height="100"></canvas>

Remarque: L'étiquette habituellement besoin de spécifier un attribut id (le script souvent cité), la taille, la largeur et la hauteur des attributs définissent la toile.

Astuce: Vous pouvez utiliser plusieurs élément <canvas> dans une page HTML.

En utilisant l'attribut de style pour ajouter une bordure:

Exemples

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Essayez »

Utilisez JavaScript pour dessiner des graphiques

élément canvas est lui-même ne tire pas le pouvoir. Tous les travaux doivent être rédigés en JavaScript fait à l'interne:

Exemples

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Essayez »

Desexemples d'analyse:

Tout d'abord, trouver le élément <canvas>:

var c=document.getElementById("myCanvas");

Ensuite, créez l'objet de contexte:

var ctx=c.getContext("2d");

getContext ( "2d") objet est un objet intégré HTML5 dispose de plusieurs méthodes pour les chemins de dessin, des boîtes, des cercles, des personnages, et l'ajout d'images.

Les deux lignes de code suivant dessine un rectangle rouge:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

Réglage de la propriété fillStyle peut être une couleur CSS, dégradé ou motif. réglage par défaut est fillStyle # 000000 (noir).

fillRect (x, y, largeur,hauteur) méthode définit un rectangle rempli avec la méthode actuelle.

Les coordonnées de toile

la toile est une grille à deux dimensions.

toile supérieure coordonnées de coin gauche (0,0)

La méthode ci-dessus a des paramètres FillRect (0,0,150,75).

Cela signifie: Dessiner un rectangle 150x75 sur la toile à partir du coin supérieur gauche (0,0).

Desexemples de coordonnées

Comme on le voit ci-dessous, les coordonnées X et Y de la toile sur la toile pour le positionnement de la peinture. Le mouvement du rectangle de la souris, l'emplacement d'affichage coordonnées.

X
Y

Toile - Chemin

Sur la ligne de peinture de toile, nous allons utiliser les deux méthodes suivantes:

  • moveTo(x, y) les coordonnées de définir une ligne commençant
  • lineTo(x, y) les coordonnées pour définir la fin de la ligne

Tracez une ligne, nous devons utiliser les méthodes "d'encre", comme la course ().

Exemples

Définir commencer les coordonnées (0,0), et les coordonnées d'extrémité (200, 100), puis utiliser la méthode course () pour tracer la ligne:

Votre navigateur ne supporte pas le HTML5 élément <canvas>.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Essayez »

Tracez un cercle dans la toile, nous allons utiliser la méthode suivante:

  • arc (x, y, r, démarrer, arrêter)

En fait, nous avons utilisé la "encre" approche lors de l'élaboration d'un cercle, comme un AVC () ou remplir ().

Exemples

Utilisez l'arc () pour dessiner un cercle:

Votre navigateur ne supporte pas le HTML5 élément <canvas>.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Essayez »

Toile - Texte

Utilisez canevas pour dessiner le texte, les propriétés et les méthodes importantes comme suit:

  • police - définir la police
  • fillText (texte, x, y)- Dessine un texte solide sur toile
  • strokeText (texte, x, y)- dessin sur toile texte creuse

Utilisez fillText ():

Exemples

Utilisez la police "Arial" rendre un texte de haute 30px (solide) sur la toile:

Votre navigateur ne supporte pas le HTML5 élément <canvas>.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Essayez »

Utilisez strokeText ():

Exemples

Utilisez la police "Arial" rendre un texte de haute 30px (creux) sur toile:

Votre navigateur ne supporte pas le HTML5 élément <canvas>.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Essayez »

Toile - Gradient

Gradient peut être rempli dans des rectangles, des cercles, des lignes, du texte, etc., différentes formes peuvent définir des couleurs différentes.

Voici deux façons différentes pour définir Canvas Gradient:

  • createLinearGradient (x, y, x1,y1) - Créer un gradient de ligne
  • createRadialGradient (x, y, r,x1, y1, r1) - Création d' un / rond-grader radial

Lorsque nous utilisons un objet dégradé, vous devez utiliser deux ou plusieurs couleurs d'arrêt.

addColorStop () pour indiquer les arrêts de couleurs, utiliser des coordonnées pour décrire les paramètres qui peuvent être 0-1.

En utilisant le paramètre fillStyle ou strokeStyle gradient de valeur de dégradé, puis dessiner des formes, telles que des rectangles, du texte ou une ligne.

Utilisez createLinearGradient ():

Exemples

Créer un dégradé linéaire. Utilisez dégradé rectangle:

Votre navigateur ne supporte pas le HTML5 élément <canvas>.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Essayez »

Utilisez createRadialGradient ():

Exemples

Créer un dégradé radial / circulaire. Utilisez dégradé rectangle:

Votre navigateur ne supporte pas HTML5 élément <canvas>.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Essayez »

Toile - Images

L'une image sur la toile, en utilisant les méthodes suivantes:

  • drawImage(image, x, y)

Utiliser une image:

Le Cri

Exemples

L'image est placée sur une toile:

Votre navigateur ne supporte pas le HTML5 élément <canvas>.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Essayez »

Manuel HTML Canvas Référence

la propriété complète de l'étiquette peut se référer manuel de référence Toile.

Le code HTML <canvas> Tag

Tag 描述
<canvas> HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。