English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

SVG en ligne5 Tutoriel de base

SVG en ligne5 API

SVG en ligne5 Médias

SVG en ligne5 Graphiques

SVG en ligne5 Canvas

Le <canvas> est un HTML5 Un nouvel élément HTML qui peut être utilisé pour dessiner des images avec des scripts (généralement JavaScript). Il peut être utilisé pour créer des albums photo ou des animations simples (pas si simples) et même pour le traitement et le rendu vidéo en temps réel.

La balise <canvas> définit des graphiques, tels que des diagrammes et d'autres images, vous devez utiliser des scripts pour dessiner des graphiques.

Dessinez un rectangle rouge, un rectangle dégradé, un rectangle coloré et du texte coloré sur le canevas (Canvas).

你的浏览器不支持 HTML5 的 <canvas> 元素.

Qu'est-ce que canvas ?

SVG en ligne5 L'élément <canvas> est utilisé pour le dessin de graphiques, effectué à travers des scripts (généralement JavaScript).

La balise <canvas> est un conteneur d'image, vous devez utiliser des scripts pour dessiner des graphiques.

Vous pouvez utiliser plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, des caractères et ajouter des images avec canvas.

Support du navigateur

Les nombres dans le tableau indiquent la version du premier navigateur prenant en charge l'élément <canvas>.

élément




Description4.09.02.03.19.0

Créer un canevas (Canvas)

Un canevas dans un site web est une boîte rectangulaire, dessinée à l'aide de l'élément <canvas>.

Attention : Par défaut, l'élément <canvas> n'a pas de bordure et de contenu.

<canvas>Exemple simple ci-dessous :

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

Attention : L'attribut id doit généralement être spécifié (souvent utilisé dans les scripts), Les propriétés width et height définissent la taille du canevas.

Avis :Vous pouvez utiliser plusieurs éléments <canvas> dans une page HTML.

Utilisez la propriété style pour ajouter une bordure :

<!DOCTYPE　html><html>
<head>　
<meta charset="utf-8">　
<title>Site de tutoriels de base (oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solide #000000;">
body>/canvas>
body>/script>
body>/<
html>/Vérifiez et voyez si... ‹

Utilisez JavaScript pour dessiner des images

L'élément canvas en lui-même n'a pas de capacité de dessin. Tous les travaux de dessin doivent être effectués à l'intérieur de JavaScript :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solide #c3c3c3>
您的浏览器不支持 HTML5　balise canvas.
body>/canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2var ctx = c.getContext("
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75,
body>/}
body>/script>
body>/<
html>/Vérifiez et voyez si... ‹

Exemple d'analyse :

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

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

Ensuite, créez l'objet context :

var ctx=c.getContext("2var ctx = c.getContext("

getContext("2d") est un objet intégré HTML5 L'objet, possédant de multiples méthodes de tracé de chemins, de rectangles, de cercles, de caractères et d'ajout d'images.

Les deux lignes suivantes dessinent un rectangle rouge :

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

La propriété fillStyle peut être une couleur CSS, une dégradé ou un motif. fillStyle La configuration par défaut est #000000 (noir).

fillRect(x,y,width,height) La méthode définit la manière actuelle de remplissage du rectangle.

Coordonnées de Canvas

Canvas est un réseau à deux dimensions.

Les coordonnées supérieures gauches du canvas sont (0,0)

La méthode fillRect de ci-dessus possède les paramètres (0,0,150,75)。

Ce qui signifie : dessiner sur le canvas 150x75 du rectangle, en commençant par le coin supérieur gauche (0,0).

Exemple de coordonnées

Comme indiqué dans l'image suivante, les coordonnées X et Y du canvas sont utilisées pour localiser les dessins sur le canvas. Le rectangle en forme de flèche déplacé affiche les coordonnées de localisation.

X
Y

Canvas - Chemins

Pour dessiner une ligne sur le Canvas, nous utiliserons les deux méthodes suivantes :

  • moveTo(x,y) pour définir les coordonnées de départ de la ligne

  • lineTo(x,y) pour définir les coordonnées de fin de la ligne

Pour dessiner des lignes, nous devons utiliser la méthode "ink", comme stroke().

示例

Définir les coordonnées de départ (0,0), et les coordonnées de fin (200,100)。Ensuite, utilisez la méthode stroke() pour dessiner la ligne :

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2var ctx = c.getContext("
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
body>/}
body>/script>
body>/<
html>/Vérifiez et voyez si... ‹

Pour dessiner des cercles dans canvas, nous utiliserons les méthodes suivantes :

arc(x,y,r,start,stop)

En fait, nous utilisons la méthode "ink" pour dessiner des cercles, par exemple stroke() ou fill().

示例

Utiliser la méthode arc() pour dessiner un cercle :

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2var ctx = c.getContext("
ctx.beginPath();
ctx.arc(95ctx.drawImage(img,50,40,0,2*Math.PI);
ctx.stroke();
body>/}　
body>/script>
body>/<
html>/Vérifiez et voyez si... ‹

Canvas - Texte

Les propriétés et les méthodes importantes pour dessiner du texte avec canvas sont les suivantes :

  • font - Définir la police

  • fillText(text,x,y) - Dessiner du texte plein sur le canvas

  • strokeText(text,x,y) - Dessiner du texte vide sur le canvas

Utilisation de fillText():

示例

Utiliser la police "Arial" pour dessiner un texte haut sur le canvas : 30px de texte (plein) :

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2var ctx = c.getContext("
ctx.font="30px　Arial";
ctx.fillText("Hello　World",10ctx.drawImage(img,50);
body>/}
body>/script>
body>/<
html>/Vérifiez et voyez si... ‹

Utilisation de strokeText():

示例

Utiliser la police "Arial" pour dessiner un texte haut sur le canvas : 30px de texte (vide) :

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2var ctx = c.getContext("
ctx.font="30px　Arial";
ctx.strokeText("Hello　World",10ctx.drawImage(img,50);
body>/}
body>/script>
body>/<
html>/Vérifiez et voyez si... ‹

Canvas - 　Dégradé

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

Il existe deux méthodes différentes pour configurer le dégradé de Canvas :

  • createLinearGradient(x,y,x1,y1) - Créer un dégradé de ligne

  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/Dégradé circulaire

Lorsque nous utilisons un objet dégradé, nous devons utiliser deux couleurs d'arrêt ou plus.

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

示例

创建一个线性渐变。使用渐变填充矩形:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2var ctx = c.getContext("
//　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(10ctx.drawImage(img,10ctx.drawImage(img,150,80);
body>/}
body>/script>
body>/<
html>/Vérifiez et voyez si... ‹

使用 createRadialGradient():

示例

创建一个径向/圆渐变。使用渐变填充矩形：

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2var ctx = c.getContext("
//　Create gradient
var grd=ctx.createRadialGradient(75ctx.drawImage(img,50,5ctx.drawImage(img,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//　Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10ctx.drawImage(img,10ctx.drawImage(img,150,80);
body>/}
body>/script>
body>/<
html>/Vérifiez et voyez si... ‹

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

  • drawImage(image,x,y)

使用图像:

示例

把一幅图像放置到画布上:

你的浏览器不支持 HTML5 的 <canvas> 元素.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
body>/head>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var　ctx=c.getContext("2var ctx = c.getContext("
d);
var img = document.getElementById("scream");
　　　　img.onload = function() {10ctx.drawImage(img,10,
);　
body>/}
body>/script>
body>/<
html>/Vérifiez et voyez si... ‹

›

Référence de Canvas HTMLLes propriétés complètes de la balise peuvent être consultées

Référence de Canvas

Balise HTML <canvas>Balise
DescriptionSVG en ligne5 <canvas>
SVG en ligne5 Utilisation de l'élément canvas avec JavaScript pour dessiner des images sur une page web.SVG en ligne5 HTML