Apprendre HTML5 en jouant (1) - Explication détaillée de Canvas-Tutoriel H5-php.cn

Apprendre HTML5 en jouant (1) - Explication détaillée de Canvas

黄舟

Libérer： 2017-03-29 14:36:36

original

1655 Les gens l'ont consulté

width="750">

一、canvas>标签

Html5 引入了一个新的

新闻链接：Google声称Chrome7浏览器将提速60倍

<canvas>标签的用法非常简单，如下：
<canvas id="tutorial" width="150" height="150" style="background-color:red;">
            你的浏览器不支持 Canvas 标签</canvas>

Copier après la connexion

标签中间的内容是替换内容，如果用户的浏览器不支持

1.<toile

> Html5

introduit une nouvelle balise

Lien vers l'actualité :

Google affirme que le navigateur Chrome 7 sera 60 fois plus rapide

. Le contenu au milieu de la balise

est contenu de remplacement Si le navigateur de l'utilisateur ne prend pas en charge le < canvas>, ce contenu sera affiché ; si le navigateur de l'utilisateur prend en charge la balise

L'effet d'affichage du code

Si vous utilisez le

navigateur IE

, vous ne pourrez peut-être que voir Un conseil : si vous utilisez Google Chrome ou

var canvas = document.getElementById(&#39;tutorial&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);

Copier après la connexion

Firefox

, vous pouvez voir une zone en forme de carré rouge.

2. Contexte de rendu

En fait, on ne peut rien faire juste avec la balise

Hors sujet : Pourquoi avons-nous besoin de créer un concept aussi compliqué que celui de « contexte » ? Grâce au contexte

objet , nous pouvons donner à différents appareils graphiques la même apparence à nos yeux. Nous devons uniquement nous concentrer sur le dessin et laisser le système d'exploitation et le navigateur faire le reste du travail. Pour parler franchement, cela signifie transformer diverses choses concrètes en abstractions unifiées, réduisant ainsi notre fardeau.

var canvas = document.getElementById(&#39;tutorial&#39;); 
if (canvas.getContext){ 
    alert("支持 <canvas> 标签"); 
} else { 
    alert("不支持 <canvas> 标签");

Copier après la connexion

Obtenir le contexte est très simple. Vous n'avez besoin que des deux lignes de code suivantes : Récupérez d'abord l'objet canevas, puis appelez la méthode getContext du canevas. objet. Cette méthode ne peut être transmise que dans le paramètre "2d", dans un avenir proche, il pourra prendre en charge le paramètre "3d", vous devez comprendre ce que cela signifie, attendons-le avec impatience. La méthode getContext renvoie un objet CanvasRenderingContext2D, qui est l'objet de contexte de rendu. Vous pouvez trouver plus d'informations à ce sujet ici, qui sont quelques méthodes de dessin. 3. Prise en charge du navigateur En plus d'afficher du contenu alternatif sur les navigateurs non pris en charge, nous pouvons également utiliser des scripts pour vérifier si le navigateur prend en charge le canevas. , la méthode est très simple. Il suffit de déterminer si la fonction getContext existe. Le code est le suivant : .

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!