Compréhension approfondie de l'utilisation de base de la balise HTML5 Canvas

Cet article présente une compréhension approfondie de l'utilisation de base de la balise HTML5 Canvas. Elle a une certaine valeur de référence. Maintenant, je la partage avec vous. Les amis dans le besoin peuvent s'y référer

Utilisation de base Utilisez la balise pour créer un élément de canevas sur la page. Une fois le canevas créé, vous pouvez utiliser la puissante API Canvas fournie par Javascript pour écrire du code. pour dessiner des graphiques dans le canevas, et même ajouter des animations avancées.

Dessiner des graphiques dans Canvas nécessite généralement cinq étapes, dans l'ordre :

1) Créer un canevas

Dans le corps du code HTML, utilisez la balise pour créer un élément Canvas. Lors de la création, définissez l'attribut id pour l'élément car Javascript doit obtenir l'élément canvas en fonction de l'identifiant.

La largeur par défaut du canevas est de 300 px et la hauteur est de 150 px. Vous pouvez personnaliser sa largeur et sa hauteur via l'attribut width de l'élément Le code est le suivant :

Le code ci-dessus crée un canevas dans la page avec un identifiant "canvas", une largeur de 300px, et une hauteur de 300px.

Instructions :

1. Par défaut, le canevas lui-même n'a aucune apparence, c'est juste une zone transparente et rien n'est visible pour. le rendre visible. Comme les autres éléments HTML, vous pouvez également utiliser CSS pour définir la taille de l'élément canevas, ajouter des bordures, définir les marges intérieures, les marges extérieures, etc. De plus, les règles d'héritage des propriétés CSS s'appliquent également. Par exemple, le texte ajouté au canevas héritera par défaut des propriétés de police de l'élément canevas.

Il est important de noter que la taille du canevas et la taille définie par CSS sont des concepts complètement différents. La taille du canevas est définie par les attributs width et height de l'élément canevas, et la taille définie en CSS est la taille de l'élément canevas affiché sur la page. Si les deux dimensions définies ne sont pas identiques, les pixels sur le canevas seront automatiquement mis à l'échelle pour s'adapter aux dimensions définies dans le CSS. De plus, les coordonnées dans le canevas sont également définies en fonction des propriétés de largeur et de hauteur du canevas.

2. Une fois la taille du canevas définie, elle ne peut être modifiée que si le canevas est réinitialisé. La réinitialisation des propriétés de largeur ou de hauteur du canevas effacera tout le canevas, effacera le chemin actuel et réinitialisera toutes les propriétés graphiques à leur état initial.

3、由于 是HTML5中新增的元素，一些老浏览器（如IE8及以下版本）不支持 元素。可以在 元素内部提供替代图片、或文本说明，为访问者提供友好的提示信息。如：

id = "canvas" width = "300" height = "300" > 您的浏览器不支持canvas。

2）获取绘制上下文

现在画布已经有了，要在画布上绘制图形，还需要一只画笔。获取画笔的方法如下：

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); 由于画笔是属于画布的，所以先要调用getElementById()方法获得画布的访问权。然后，调用画布对象的getContext()方法来获取画笔，这里的字符串参数"2d"，用来定义画笔的种类，"2d"表示绘制二维图形的画笔。当然，还会有"3d"，但目前还不支持。

画笔在Canvas 中被称作“绘制上下文”，Canvas API基本上都是定义在“绘制上下文”对象上，而非 元素上。

3）定义绘制路径

Canvas中的所有基本图形，都是根据路径来绘制的。首先，调用beginPath()方法开始一条新的路径；然后，定义路径及子路径；最后，调用closePath()方法来关闭。代码如下：

context.beginPath(); context.rect(20, 40, 200, 80); context.closePath(); 上述代码中，rect()方法绘制了一条矩形路径，该矩形路径的左上顶点坐标为x=20,y=40，矩形宽度为200px，长度为80px。

说明：Canvas的坐标系

默认情况下，Canvas 的坐标系以Canvas 元素的左上角为坐标原点(0, 0)。水平方向为x轴，并向右增长；垂直方向为y轴，并向下增长。如图 4‑1所示：

图4-1 Compréhension approfondie de lutilisation de base de la balise HTML5 Canvas

画布上每一个点的坐标都直接映射到一个CSS像素上，点可以使用浮点数来指定坐标，但它不会自动转换为整型值。

需要注意的是，此时，所绘制的内容并不会立即显示出来。因为这里只是定义一条不可见的路径，并未在画布上绘制任何图形。稍后，可以调用stroke()或fill()方法，来执行绘制动作，使其可见。

4）设置图形属性

context.strokeStyle = '#f00'; // 设置线条样式 context.fillStyle = "#ccc"; // 设置填充样式 上述代码设置矩形路径的轮廓线条的颜色为红色（#f00），填充颜色为灰色（#ccc）。该步骤为可选，如果省略，则使用Canvas提供的默认属性绘图。

5）绘制图形

Canvas默认提供两种绘制方法：stroke()方法和fill()方法。stroke()方法沿着路径的坐标点依次绘制线条，fill()方法填充路径形成的闭合区域。

这两个方法都作用在当前路径的所有子路径上，并且都不更改当前路径，所以它们可以被同时调用。代码如下：

context.stroke(); context.fill(); 如果存在多条路径，则每条路径都要分别调用stroke()方法或fill()方法，否则，该路径不会被绘制，该路径所定义的图形不会显示在画布中。

至此，在画布中绘制图形的过程就全部完成了，图形已经真正绘制到画布上了。当然，在实际应用中，最好将这些绘制过程封装在一个函数中，并在页面加载完成后，再调用绘制函数来绘制图形。本实例的完整代码如下：

$(function(){ drawRect(); }); function drawRect() { var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); context.beginPath(); context.rect(20, 40, 200, 80); context.closePath(); context.strokeStyle = '#f00'; context.fillStyle = "#ccc"; context.stroke(); context.fill(); } 在浏览器中的运行效果如图 4‑2所示：

图4-2 Compréhension approfondie de lutilisation de base de la balise HTML5 Canvas

Compréhension approfondie de l'utilisation de base de la balise HTML5 Canvas

Articles Liés