Utilisez canevas pour dessiner des graphiques en HTML

* Ce qui suit est la note

Tout d'abord, quelle est la toile

HTML5 <canvas> est utilisé pour dessiner des graphiques, fait par un script (habituellement JavaScript).
Balise <canvas> est un conteneur graphique, vous devez utiliser un script pour dessiner des graphiques.

Vous pouvez utiliser la toile par une variété de méthodes pour tracer des chemins, des boîtes, des cercles, des personnages, et en ajoutant des images.

Deuxièmement, comment utiliser la toile

1, la mise en place d'un exemple de toile

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

effet:

2, dessiner l'image en utilisant JavaScript

L'élément de toile elle-même ne tire pas le pouvoir. Tous les travaux de dessin doit être complété dans JavaScript:

//通过getElementById找到<canvas>元素
var can = document.getElementById("myCanvas");
// 创建context对象
var ctx = can.getContext("2d");
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
// 接下来就可以使用context对象来进行画图了

// 例1
context.beginPath();

Troisièmement, plusieurs paramètres de la toile

1, les coordonnées de toile

la toile est une grille à deux dimensions à
gauche coin de la toile pour la (0,0)

2, le chemin de toile

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

moveTo(x,y)Définit une ligne de début coordonnées
lineTo(x,y)définissent une ligne se terminant coordonnées
pour dessiner des lignes que nous devons utiliser les méthodes « d'encre », commestroke()

context.moveTo(0,120);
context.lineTo(0,180);
context.lineTo(110,150);
context.fill();//闭合形状而且以填充方式绘制出来

Tracez un cercle dans la toile, nous utiliserons les méthodes suivantes:
arc(x,y,r,start,stop,counterclockwise)
X: X coordonnée
y: coordonnée y
r: rayon
départ: angle de départ en radians
arrêt: Angle final, en radians
sens anti - horaire: Sinon, dans le sens horaire ou anti - horaire Faux = dans le sens horaire, true = antihoraire

// 在300，400处，逆时针画一个半径为30，角度为0到270度的弧

context.arc(300, 400, 30, 0*Math.PI, 3/2*Math.PI,false);
context.stroke();

3, texte toile

Utilisez toile pour dessiner le texte, les propriétés importantes et les méthodes sont suit comme:
font- Personnalisé police
fillText(text,x,y)- le texte pour le rendre solide sur toile
strokeText(text,x,y)- texte rendu creux sur toile

context.font="30px Arial";
context.fillText("Hello Edison", 30, 50);

4, l'image

Une image est placé sur la toile, en utilisant la méthode suivante:

drawImage(image,x,y)
J'ai commencé est écrit

var can = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "http://www.huangjihao.com/wp-content/uploads/2019/07/UNADJUSTEDNONRAW_mini_1.jpg";
var context = can.getContext("2d");
context.drawImage(this, 0, 0);

Puis j'ai découvert, écrire et ne montre pas l' image
après l' accès à l' information en ligne a appris

Insérer des images dans la toile, vous devez attendre avant de pouvoir être le fonctionnement à pleine charge après l' image, alors que le navigateur asynchrone normalement effectuer dans le script de la page image de charge.
Si vous essayez d'image est pas complètement chargée avant qu'il ne soit présenté à la toile, n'affichera une image.

Ainsi, le code après modifications sont les suivantes:

var can = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "http://www.huangjihao.com/wp-content/uploads/2019/07/UNADJUSTEDNONRAW_mini_1.jpg";
//待图片加载完后，将其显示在canvas上
imgObj.onload = function(){ //onload必须使用
    var context = can.getContext("2d");
    context.drawImage(this, 0, 0);
}

Effet:

* référence à la recrue tutoriel
https://www.runoob.com/html/html5-canvas.html
https://www.runoob.com/tags/ref-canvas.html

Troisièmement, je peignais modèle de fantaisie

 var can = document.getElementById("myCanvas");
var context = can.getContext("2d");

// 熊的大脸
context.beginPath();
context.arc(300, 200, 90, 0*Math.PI, 2*Math.PI,false);
context.stroke();

// 左眼
context.beginPath();
context.arc(270, 180, 7, 0*Math.PI, 2*Math.PI,false);
context.fill();
// 右眼
context.beginPath();
context.arc(330, 180, 7, 0*Math.PI, 2*Math.PI,false);
context.fill();

// 嘴巴边缘
context.beginPath();
context.arc(300, 240, 35, 0, 2*Math.PI,true);
context.stroke();
// 鼻子
context.beginPath();
context.arc(300, 220, 8, 0, 2*Math.PI,true);
context.fill();
// 嘴巴
context.beginPath();
context.arc(300, 250, 10, Math.PI, 2*Math.PI,true);
context.fill();

// 右耳
context.beginPath();
context.arc(380, 135, 30, 1/2*Math.PI, 10/9*Math.PI,true);
context.stroke();

//左耳
context.beginPath();
context.arc(220, 135, 30, 1/2*Math.PI, 19/10*Math.PI,false);
context.stroke();

context.beginPath();

//右手
context.beginPath();
context.moveTo(460,260);//从点(160,160)開始
context.lineTo(470,320);
context.lineTo(540,310);
context.lineTo(560,270);
context.lineTo(490,240);
context.closePath();
context.stroke();

// 左手
context.beginPath();
context.moveTo(140,260);
context.lineTo(130,320);
context.lineTo(60,310);
context.lineTo(40,270);
context.lineTo(110,240);
context.closePath();
context.stroke();

// 身体
context.beginPath();
context.rect(200,330,200,300);
context.stroke();

// 左脚
context.beginPath();
context.arc(130, 700, 30, 0, 2*Math.PI,true);
context.stroke();
// 左脚内圆
context.beginPath();
context.arc(130, 700, 5, 0, 2*Math.PI,true);
context.stroke();

// 右脚
context.beginPath();
context.arc(470, 700, 30, 0, 2*Math.PI,true);
context.stroke();
// 右脚内圆
context.beginPath();
context.arc(470, 700, 5, 0, 2*Math.PI,true);
context.stroke();


// 图片摆放
var can = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "http://www.huangjihao.com/wp-content/uploads/2019/07/UNADJUSTEDNONRAW_mini_1.jpg";
imgObj.onload = function(){ //onload必须使用
    var context = can.getContext("2d");
    context.drawImage(this, 600, 400);
}
// 写上署名
context.font="20px Arial";
context.fillText("文字：hjh留下了名字", 600, 740);

effet: