Quel élément en HTML5 peut dessiner des graphiques

Éléments pouvant dessiner des graphiques en HTML5 : 1. élément "canvas", qui peut dessiner des graphiques de manière dynamique via des scripts JavaScript ; 2. élément "SVG", qui peut définir des graphiques vectoriels pour le réseau, en utilisant le format XML pour définir des graphiques .

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

HTML5 Canvas et SVG vous permettent tous deux de créer des graphiques dans le navigateur, mais ils sont fondamentalement différents.

SVG

• SVG est un langage qui utilise XML pour décrire les graphiques 2D.

• SVG est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher un gestionnaire d'événements JavaScript à un élément.

• En SVG, chaque forme dessinée est considérée comme un objet. Si les propriétés d'un objet SVG changent, le navigateur peut automatiquement reproduire le graphique.

Canvas

• Canvas dessine des graphiques 2D via JavaScript.

• Canvas est rendu pixel par pixel.

• Dans Canvas, une fois le graphique dessiné, il ne recevra plus l'attention du navigateur. Si sa position change, la scène entière doit être redessinée, y compris tous les objets qui auraient pu être recouverts par des graphiques.

1. Canvas

canvas est une nouvelle balise HTML5 en HTML5 et une API javascript pour faire fonctionner le canevas. Elle peut réaliser une technologie d'image dynamique 2D et 3D dans les pages Web. Une différence importante entre le balisage et SVG et VML est que possède une API de dessin basée sur JavaScript, tandis que SVG et VML utilisent un document XML pour décrire le dessin. Les dessins SVG sont faciles à modifier et à générer, mais sont nettement moins puissants.

Canvas peut compléter l'animation, les jeux, les graphiques, le traitement d'images et d'autres fonctions qui nécessitaient à l'origine Flash.

1. Créer un canevas

<canvas  id="draw" width="600" height="600"></canvas>

Créez une balise canevas en HTML. Il est préférable de définir la largeur et la hauteur dans la balise elle-même. Si vous définissez la largeur et la hauteur d'une autre manière, il y aura une différence de déplacement de 0,5.

var draw=document.getElementById("draw");
//获取画布元素
var draws=draw.getContext("2d");
//给画布一个绘制环境，2d表示在2d环境下绘制
//draws返回的是一个对象

2. Draw

//绘制线条

//设置线宽
draws.lineWidth = 10;
//设置线的颜色
draws.strokeStyle = "blue";
            
draws.moveTo(0,0);  //移动画笔到0,0点
draws.lineTo(300,300);  //画线到300,300的位置
draws.stroke();  //执行描边

//绘制矩形
draws.strokeRect(x,y,width,height) //绘制一个边框矩形
draws.fillRect(x,y,width,height) //绘制一个填充矩形

draws.clearRect(x,y,width,height) //清除一个矩形


//绘制圆形
draws.arc(x,y,radius,startAngle,endAngle,anticlockwise)
//arc方法用来绘制一段圆弧路径，以(x,y)圆心位置radius为半径、startAngle为起始弧度、
//endAngle为终止弧度来，而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，
//如果为 true 就是逆时针，false 则为顺时针，Math.PI * 2 刚好为一周。

//绘制图像 
//在html中加入一个img标签 
<img src="1.jpg" id="pic"/>
//在JS中...
//需要将页面中的图片都加载完之后执行
window.onload=function(){



//绘制文字

//描边文字
draws.font="50px microsoft yahei"

//设置描边字体颜色
draws.strokeText("Hello",20,100) 

//设置描边文字内容，和X坐标Y坐标

//填充文字

draws.fillStyle="red"
//设置填充字体颜色
draws.fillText("Hello",20,200); 

//设置填充文字内容，和X坐标Y坐标

3. Comprendre certaines méthodes de canevas

draws.beginpath()
draws.closepath()
// 二者同时出现  将绘制路径闭合 ,自动将路径闭合


draws.save()
draws.restore()
//二者成对出现 中间的属性样式只影响内部 不影响外部


//translate()
draws.strokeRect(0, 0, 150, 150);

draws.translate(150, 150);

draws.strokeRect(0, 0, 150, 150); //被平移的元素
//平移后这个被平移的元素的坐标就会改变


//rotate()

draws.rotate(0.2);

draws.strokeRect(75, 75, 75, 75); //根据画布的0，0点旋转

2. SVG

SVG Scalable Vector Graphics est basé sur le langage de balisage extensible (XML) et est utilisé pour décrire les graphiques vectoriels bidimensionnels. .Format graphique. SVG est un nouveau format de graphiques vectoriels bidimensionnels formulé par le W3C (« World Wide Web ConSortium » ou « International Internet Standards Organization ») en août 2000. Il s'agit également de la norme de graphiques vectoriels de réseau dans la spécification. SVG suit strictement la syntaxe XML et utilise un langage descriptif au format texte pour décrire le contenu de l'image. Il s'agit donc d'un format graphique vectoriel indépendant de la résolution de l'image. SVG est devenu une recommandation du W3C le 14 janvier 2003.

Caractéristiques :

1. Toute mise à l'échelle

Les utilisateurs peuvent redimensionner l'affichage de l'image arbitrairement sans détruire la clarté, les détails, etc.

2. Le texte est indépendant

Le texte de l'image SVG est indépendant de l'image et le texte reste modifiable et consultable. Il n'y aura plus de restrictions sur les polices. Même si une certaine police n'est pas installée sur le système de l'utilisateur, celui-ci verra exactement le même écran que lors de sa création.

3. Fichiers plus petits

De manière générale, les fichiers SVG sont beaucoup plus petits que ceux aux formats GIF et JPEG, ils se téléchargent donc rapidement.

4. Super effet d'affichage

Les images SVG ont toujours des bords clairs sur l'écran et sa clarté convient à n'importe quelle résolution d'écran et résolution d'impression.

5. Super contrôle des couleurs

Les images SVG fournissent une palette de 16 millions de couleurs, prenant en charge les normes de profil de couleur ICC, RVB, remplissage de la ligne X, dégradé et masque.

6.Interaction et intelligence. L'un des principaux problèmes auxquels SVG est confronté est de savoir comment concurrencer Flash, un format graphique vectoriel qui occupe déjà une part de marché importante. L'autre problème est le degré de prise en charge du SVG par les fabricants dans son environnement d'exploitation local.

Prise en charge des navigateurs :

Internet Explorer9, Firefox, Google Chrome, Opera et Safari prennent tous en charge SVG.
IE8 et les versions antérieures nécessitent un plug-in, tel que Adobe SVG Browser, disponible gratuitement.

1. Méthode d'introduction

Méthode 1 :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
绘制图形
</svg>

• xmlns : espace de noms

• version : version

Méthode 2 :

<img src="01.svg" alt="">

2. Tirage au sort

<svg>

//绘制直线

 <line x1="0" y1="0" x2="500" y2="500" style="stroke:rgb(0,0,255);stroke-width:3"></line>

//参数：
//x1 属性在 x 轴定义线条的开始
//y1 属性在 y 轴定义线条的开始
//x2 属性在 x 轴定义线条的结束
//y2 属性在 y 轴定义线条的结束

//绘制圆形、椭圆

<circle r="50" cx="110" cy="60" fill="lightskyblue"></circle>

<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:dodgerblue;stroke-width:5"><ellipse/>

//参数
//CX属性定义的椭圆中心的x坐标
//CY属性定义的椭圆中心的y坐标
//RX属性定义的水平半径
//RY属性定义的垂直半径

//绘制文本

<text x="0" y="50" fill="blue" style="font-size:30px; font-family: &#39;microsoft yahei&#39;;">My Text</text>


//绘制矩形

 <rect x="40" y="60" width="260" height="260" style="fill:blue;stroke:pink;stroke-width:5;

//绘制图像

<image x="20" y="20" width="100" height="80" xlink:href="./img/1.jpg"></image>

//绘制路径 

<path d="M70 0 L100 150 L40 150 Z" stroke="plum" fill="plum" ></path>

//参数
//M是起点坐标 L是相邻点坐标 Z让路径构成闭合回路
//H代表水平的线条 默认y轴上的值一样
//V 代表垂直的线条 默认x轴上的值一样/
//A 后面跟七个值

//绘制多边形

<Polygon points=””></polygon>

//points：多边形的点

//绘制折线

<polyline points=”” ></polyline>

//points：折线的点
 
</svg>

Recommandations associées : 《 Tutoriel vidéo HTML》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!