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

width="750">

一、canvas>标签 Html5 引入了一个新的 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢? 新闻链接：Google声称Chrome7浏览器将提速60倍 <canvas>标签的用法非常简单，如下： <canvas id="tutorial" width="150" height="150" style="background-color:red;"> 你的浏览器不支持 Canvas 标签</canvas> 标签和普通的 HTML 标签没有多大的区别，你可以设置它的宽度和高度，可以通过 CSS 设置它的背景色、边框样式等等。你可以在 这里 找到关于 标签的更多内容。 标签中间的内容是替换内容，如果用户的浏览器不支持 标签，这段内容就会被显示出来；如果用户的浏览器支持 标签，则这段内容将被忽略。

1.<toile

> Html5

introduit une nouvelle balise , la zone représentée par cette balise est juste comme un toile, tous vos dessins graphiques seront éventuellement présentés sur cette toile. Avec cette balise, l'expression graphique du navigateur a été grandement améliorée. Vous sentez-vous menacé par Flash et SilverLight ?

Lien vers l'actualité :

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

et Il n'y a pas beaucoup de différence entre les balises HTML ordinaires. Vous pouvez définir sa largeur et sa hauteur, définir sa couleur d'arrière-plan, son style de bordure, etc. via CSS. Vous pouvez en savoir plus sur la balise ici

. 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 ci-dessus est le suivant :

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('tutorial');
var ctx = canvas.getContext('2d');

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 🎜> Les étudiants savent tous que le dessiner sous Windows nécessite d'abord d'obtenir un contexte de périphérique DC. Dessiner sur la balise nécessite également d'obtenir d'abord un contexte de rendu. , il est d'abord dessiné vers le contexte, puis actualisé à l'écran.

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('tutorial'); 
if (canvas.getContext){ 
    alert("支持 <canvas> 标签"); 
} else { 
    alert("不支持 <canvas> 标签");

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!