Présentation du canevas HTML5_html5 Conseils du didacticiel

5ba626b379994d53f7acf72a64f9b697 est un nouvel élément HTML qui peut être utilisé pour dessiner des graphiques à l'aide d'un langage de script (généralement JavaScript). Par exemple, vous pouvez l'utiliser pour dessiner des images, des images composites ou réaliser des animations simples (et pas si simples). L'image de droite montre quelques exemples d'implémentations 5ba626b379994d53f7acf72a64f9b697 que nous verrons tout au long de ce didacticiel.

5ba626b379994d53f7acf72a64f9b697 a été introduit pour la première fois dans le tableau de bord Mac OS X d'Apple, puis utilisé dans Safari. Les navigateurs basés sur Gecko 1.8, comme Firefox 1.5, prennent également en charge ce nouvel élément. L'élément 5ba626b379994d53f7acf72a64f9b697 fait partie des applications Web WhatWG 1.0, également connues sous le nom de spécification standard HTML 5.

Dans ce tutoriel, je vais essayer d'expliquer comment utiliser l'élément 5ba626b379994d53f7acf72a64f9b697 Les exemples fournis devraient vous donner une idée claire de ce qui peut être fait avec 5ba626b379994d53f7acf72a64f9b697. Ces exemples peuvent également servir de point de départ pour vos propres applications de 5ba626b379994d53f7acf72a64f9b697.

Avant de commencer
Utiliser l'élément n'est pas difficile, tant que vous avez des connaissances de base en HTML et JavaScript.

Comme mentionné ci-dessus, tous les navigateurs modernes ne prennent pas en charge l'élément 5ba626b379994d53f7acf72a64f9b697, vous avez donc besoin de Firefox 1.5 ou plus récent, ou d'un autre navigateur basé sur Gecko tel qu'Opera 9, ou d'une version récente de Safari pour voir tous les exemples d'actions.

afa3b188a04709c782698c591b884423 Commençons ce tutoriel en examinant l'élément

5ba626b379994d53f7acf72a64f9b697

lui-même. Commençons par la définition de l'élément 5ba626b379994d53f7acf72a64f9b697
.

Cela ressemble beaucoup à l'élément

<canvas id="tutorial" width="150" height="150"></canvas>

a1f02c36ba31691bcfe87b2722de723b

, la seule différence est qu'il n'a pas les attributs src et alt. ;canvas> ressemble beaucoup à a1f02c36ba31691bcfe87b2722de723b, la seule différence est qu'il ne contient pas les attributs src et alt . L'élément 5ba626b379994d53f7acf72a64f9b697 n'a que deux attributs - largeur et hauteur. Ceux-ci sont tous deux facultatifs et peuvent également être définis à l'aide des propriétés DOM ou des règles CSS. il n'y a que deux propriétés, largeur et hauteur, toutes deux facultatives et pouvant être définies à l'aide de DOM ou CSS. Lorsqu'aucun attribut de largeur et de hauteur n'est spécifié, le canevas aura initialement une largeur de 300 pixels et une hauteur de 150 pixels Si les attributs de largeur et de hauteur ne sont pas spécifiés, la valeur par défaut est 300. pixels de large , 150 pixels de haut . L'élément peut être dimensionné arbitrairement par CSS, mais lors du rendu, l'image est mise à l'échelle pour s'adapter à la taille de sa mise en page (si vos rendus semblent déformés, essayez de spécifier explicitement vos attributs de largeur et de hauteur dans les attributs 5ba626b379994d53f7acf72a64f9b697. , et non avec CSS.) Bien que la taille du canevas puisse être ajustée via CSS, l'image rendue sera mise à l'échelle pour s'adapter à la mise en page (si vous trouvez que le résultat du rendu semble déformé, vous n'êtes pas obligé de vous fier uniquement au CSS . Vous pouvez essayer de spécifier explicitement la largeur du canevas et la valeur de l'attribut height). L'attribut

id

n'est pas spécifique à l'élément 5ba626b379994d53f7acf72a64f9b697 mais est l'un des attributs HTML par défaut qui peut être appliqué à (presque) tous les éléments HTML (comme class par exemple). C'est toujours une bonne idée de fournir un identifiant car cela facilite grandement son identification dans notre script.l'attribut id
n'est pas < canvas> ; Exclusif, tout comme la balise HTML standard, tout élément HTML peut spécifier sa valeur id. Généralement, c'est une bonne idée d'attribuer id aux éléments, ce qui facilite leur utilisation dans les scripts. L'élément

5ba626b379994d53f7acf72a64f9b697

peut être stylisé comme n'importe quelle image normale (marge, bordure, arrière-plan, etc.). Ces règles n'affectent cependant pas le dessin réel sur la toile. voyez comment cela est fait plus loin dans ce didacticiel. Lorsqu'aucune règle de style n'est appliquée au canevas, il sera initialement entièrement transparent. L'élément 5ba626b379994d53f7acf72a64f9b697 peut être stylisé comme une image normale (marges, bordures, contexte, etc.). Cependant, ces styles n’auront aucun impact sur l’image réelle générée par Canvas. Nous verrons ensuite comment appliquer des styles. Si aucun style n'est spécifié, le canevas est entièrement transparent par défaut.

Contenu alternatif

Étant donné que l'élément

5ba626b379994d53f7acf72a64f9b697

est encore relativement nouveau et n'est pas implémenté dans certains navigateurs (tels que Firefox 1.0 et Internet Explorer), nous avons besoin d'un moyen de fournir un contenu de secours lorsqu'un navigateur ne le fait pas. Je ne supporte pas l'élément.

因为 5ba626b379994d53f7acf72a64f9b697 相对较新，有些浏览器并没实现，如Firefox 1.0 和 Internet Explorer，所以我们需要为那些不支持canvas的浏览器提供替用显示内容。

Luckily this is very straightforward: we just provide alternative content inside the canvas element. Browsers who don't support it will ignore the element completely and render the fallback content, others will just render the canvas normally.
For instance we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:

我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。例如，我们可以把一些文字或图片填入canvas内，作为替用内容：

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150"/>
</canvas>

结束标签 c2caaf3fc160dd2513ce82f021917f8b 是必须的

In the Apple Safari implementation, 5ba626b379994d53f7acf72a64f9b697 is an element implemented in much the same way a1f02c36ba31691bcfe87b2722de723b is; it does not have an end tag. However, for 5ba626b379994d53f7acf72a64f9b697 to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation requires an end tag (c2caaf3fc160dd2513ce82f021917f8b).

在Apple Safari里，5ba626b379994d53f7acf72a64f9b697的实现跟a1f02c36ba31691bcfe87b2722de723b很相似，它并不没有结束标签。然而，为了使 5ba626b379994d53f7acf72a64f9b697 能在web的世界里广泛适用，需要给替用内容提供一个容身之所，因此，在Mozilla的实现里结束标签(c2caaf3fc160dd2513ce82f021917f8b)是必须的。

If fallback content is not needed, a simple 65ec36afffd8edae2a5cf0c4e555c057c2caaf3fc160dd2513ce82f021917f8b will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

如果没有替用内容，65ec36afffd8edae2a5cf0c4e555c057c2caaf3fc160dd2513ce82f021917f8b 对 Safari 和 Mozilla 是完全兼容的—— Safari 会简单地忽略结束标签。

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).

如果有替用内容，那么可以用一些 CSS 技巧来为并且仅为 Safari 隐藏替用内容，因为那些替用内容是需要在 IE 里显示但不需要在 Safari 里显示。

渲染上下文（Rendering Context）

5ba626b379994d53f7acf72a64f9b697 creates a fixed size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context, which is the only currently defined rendering context. In the future, other contexts may provide different types of rendering; for example, it is likely that a 3D context based on OpenGL ES will be added.

5ba626b379994d53f7acf72a64f9b697 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文（rendering context），我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGL ES 的 3D 上下文。

The 5ba626b379994d53f7acf72a64f9b697 is initially blank, and to display something a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context.

5ba626b379994d53f7acf72a64f9b697 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的 getContext 方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

In the first line we retrieve the canvas DOM node using the getElementById method. We can then access the drawing context using the getContext method.

上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。

检查浏览器的支持

The fallback content is displayed in browsers which do not support 5ba626b379994d53f7acf72a64f9b697; scripts can also check for support when they execute. This can easily be done by testing for the getContext method. Our code snippet from above becomes something like this:

除了在那些不支持  的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持 canvas 。方法很简单，判断 getContext 是否存在即可。

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

代码模板

Here is a minimalistic template, which we'll be using as a starting point for later examples. You can download this file to work with on your system.

我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始，你可以 下载文件 到本地备用。

  
    
    
    
  
  
    <canvas id="tutorial" width="150" height="150"></canvas>
  

If you look at the script you'll see I've made a function called draw, which will get executed once the page finishes loading (via the onload attribute on the body tag). This function could also have been called from a setTimeout, setInterval, or any other event handler function just as long the page has been loaded first.

细心的你会发现我准备了一个名为 draw 的函数，它会在页面装载完毕之后执行一次（通过设置 body 标签的 onload 属性），它当然也可以在 setTimeout，setInterval，或者其他事件处理函数中被调用。

一个简单的例子

To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.

作为开始，来一个简单的吧——绘制两个交错的矩形，其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。

<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>