Comment utiliser HTML5 Canvas pour dessiner des lignes telles que des lignes droites ou des polylines_html5 compétences du didacticiel-Tutoriel H5-php.cn

Explication des concepts de base de HTML5 Canvas
html5, cela ne devrait nécessiter aucune introduction, car tout développeur devrait le connaître. HTML5 est une norme technologique Web « émergente ». Actuellement, à l'exception d'IE8 et des versions antérieures, presque tous les navigateurs grand public (FireFox, Chrome, Opera, Safari, IE9) ont commencé à prendre en charge HTML5. En outre, sur le marché des navigateurs mobiles, de nombreux navigateurs mobiles ont également lancé une course aux armements concernant « les capacités et les performances de prise en charge HTML5 ». En tant que norme révolutionnaire de la technologie Web, HTML, associé au fort soutien de nombreux fabricants ou organisations de navigateurs, il est concevable que HTML5 devienne le leader de la technologie Web à l'avenir.

html5, dit « émergent », n’est en réalité pas nouveau du tout. Après tout, la première version officielle de HTML5 a été annoncée dès 2008. Depuis 2008, cela fait maintenant un bon bout de temps. Cependant, jusqu'à présent, pour la plupart des développeurs, c'est encore "un gros tonnerre mais peu de pluie" - de nombreuses personnes entendent parler de HTML5, mais très peu l'utilisent réellement.

Comme nous le savons tous, de nombreuses nouvelles fonctionnalités ont été ajoutées à HTML5. Parmi les nombreuses fonctionnalités de HTML5, Canvas doit être considérée comme l’une des nouvelles fonctionnalités les plus accrocheuses. Nous utilisons l'objet Canvas de HTML5 pour dessiner des graphiques directement sur la page Web du navigateur. Cela signifie que le navigateur peut afficher des graphiques ou des animations directement sur la page Web sans plug-ins tiers tels que Flash.

Maintenant, présentons aux débutants en HTML5 comment utiliser HTML5 Canvas pour dessiner des graphiques de base.

Tout d’abord, nous devons préparer le code HTML de base suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html>
<tête>
<méta charset="UTF- 8">
titre> tête>
<corps>
>
html>
Le code ci-dessus est un modèle de code de base pour une page html5. Parmi eux, la première ligne de code est une instruction de balise de type de document, qui est également l'instruction de type de document standard pour les pages html5. Elle est utilisée pour indiquer au navigateur "Ceci est une page html5. Veuillez analyser et. affichez-la selon les standards des pages web html5." cette page". La quatrième ligne de code est utilisée pour indiquer au navigateur "le codage des caractères de cette page html5 est UTF-8". pages Web. Ceci est différent des instructions précédentes de codage de caractères HTML. Code XML/HTML

<méta

=" Type de contenu" content="text/html;charset=UTF-8">

Maintenant, nous allons expliquer l'exemple de graphiques de dessin Canvas dans le fichier html contenant le code ci-dessus. Tout d’abord, nous ajoutons la balise canvas suivante à la partie corps du code html ci-dessus.

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html>
<tête>
<méta charset="UTF- 8">
titre> tête>
<corps>
<toile
="myCanvas" largeur="400px" hauteur="300px" style="bordure : 1px rouge uni ;"> Votre navigateur ne prend pas en charge la balise canvas.
>
>
html>

À ce stade, si nous utilisons un navigateur prenant en charge HTML5 pour ouvrir la page, nous verrons le contenu suivant :
2016314110155998.png (455×321)

En HTML5, la balise canvas elle-même n'a aucun comportement, elle occupe simplement une taille spécifiée d'espace vide sur la page. La balise canvas est équivalente à un canevas vierge. Nous devons également utiliser l'API canevas fournie par JavaScript pour écrire le code correspondant afin de dessiner les graphiques souhaités sur ce canevas.

Remarque : le contenu du texte dans la balise canvas sera affiché dans les navigateurs qui ne prennent pas en charge HTML5. Comme le montre le code HTML ci-dessus, si votre navigateur ne prend pas en charge la balise canevas de HTML5, le texte « Votre navigateur ne prend pas en charge la balise canevas » s'affichera au niveau de la balise canevas.
En tant que « peintres », nous devons d'abord nous familiariser avec le pinceau entre nos mains, qui est l'objet Canvas en JavaScript et son contenu associé.

En HTML5, une balise canvas correspond à un objet Canvas. On peut utiliser des fonctions classiques telles que document.getElementById() en JavaScript pour obtenir l'objet. Il convient de noter qu'en JavaScript, nous n'exploitons pas directement l'objet Canvas, mais obtenons l'objet de contexte de dessin graphique correspondant CanvasRenderingContext2D via l'objet Canvas, puis nous utilisons les nombreuses fonctions de dessin graphique fournies avec l'objet CanvasRenderingContext2D pour dessiner.

C'est comme si chaque toile correspondait à un pinceau. Si on veut dessiner sur la toile, il faut d'abord se procurer le pinceau correspondant, puis utiliser ce pinceau pour dessiner sur la toile. L'objet CanvasRenderingContext2D est équivalent à ce pinceau. Essayons maintenant d'obtenir ce pinceau en JavaScript.

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html>
<tête>
<méta charset="UTF- 8">
<titre>Exemple de mise en route de dessin au trait HTML5 sur toile< / titre>
tête>
<corps>
<toile id="myCanvas" largeur="400px" hauteur="300px" style="bordure : 1px rouge uni ;">
Votre navigateur ne prend pas en charge la balise canvas.
toile>
<script type="texte/ javascript">
//Récupérer l'objet Canvas (canvas)
var canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d"); }

script

> corps> html>

Comme le montre le code ci-dessus, nous pouvons utiliser la méthode getContext() de l'objet Canvas pour obtenir l'objet CanvasRenderingContext2D. Les lecteurs plus attentifs auraient dû le remarquer : la méthode getContext() doit passer une chaîne - 2d, et le nom de l'objet CanvasRenderingContext2D obtenu contient également 2D. En effet, actuellement HTML5 ne prend en charge que le dessin 2D, mais la 3D ou d'autres formes de dessin pourraient également être prises en charge dans le futur HTML5. À ce moment-là, nous devrons peut-être utiliser getContext("3d") pour obtenir l'objet CanvasRenderingContext3D et dessiner des graphiques 3D.

Utilisez le canevas html5 pour tracer des lignes (lignes droites, polylignes, etc.)
Les principales propriétés et méthodes de l'objet CanvasRenderingContext2D requises pour dessiner des lignes droites à l'aide du canevas html5 (ceux avec "() " sont des méthodes) sont les suivantes :

属性或方法	基本描述
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha	定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth	定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap	指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。
beginPath()	开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。
moveTo(int x, int y)	移动画笔到指定的坐标点`(x,y)`，该点就是新的子路径的起始点
lineTo(int x, int y)	使用直线连接当前端点和指定的坐标点`(x,y)`
stroke(int x, int y)	沿着绘制路径的坐标点顺序绘制直线
closePath()	如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。

Dans le processus de dessin graphique Canvas, nous définissons presque toujours quelques points de coordonnées dans un certain ordre, ce que l'on appelle le chemin de dessin, puis connectons ces points de coordonnées d'une manière spécifiée en fonction de nos besoins. la forme dont nous avons besoin. Après avoir compris l'API ci-dessus de l'objet CanvasRenderingContext2D, tracer des lignes devient très simple.

Utilisez la toile pour tracer des lignes droites de base

Maintenant, nous utilisons une toile pour tracer les lignes droites les plus élémentaires.

Code JavaScriptCopier le contenu dans le presse-papiers