Apprenez en jouant avec HTML5 (1) Méthode d'implémentation Canvas _Compétences du didacticiel HTML5

1. Balise

Html5 introduit une nouvelle balise La zone représentée par cette balise est comme un canevas. sur cette toile. Avec cette balise, les performances graphiques du navigateur ont été grandement améliorées. Flash et SilverLight se sentent-ils menacés ?

Lien d'actualité : Google affirme que le navigateur Chrome 7 sera 60 fois plus rapide

Le l'utilisation de la balise est très simple, comme suit :

Copiez le code

Le code est le suivant :

Votre navigateur ne prend pas en charge le Canvas tag

les balises ne sont pas très différentes des balises HTML ordinaires. Vous pouvez définir sa largeur et sa hauteur, ainsi que sa couleur d'arrière-plan et sa bordure. style, etc. via CSS attendez.

Vous pouvez en savoir plus sur la balise ici. Le contenu au milieu de la balise

est le contenu de remplacement. Si le navigateur de l'utilisateur ne prend pas en charge la balise , alors ce contenu sera affiché. Le contenu de la section sera ignoré.

Le code ci-dessus s'affiche comme suit :

Votre navigateur ne prend pas en charge la balise Canvas

Si vous utilisez le navigateur IE, vous ne pourrez peut-être que consultez-le Obtenez un conseil ; si vous utilisez Google Chrome ou Firefox, vous pouvez voir une zone carrée rouge.
2. Contexte de rendu
En fait, on ne peut rien faire uniquement avec la balise doit d'abord obtenir un DC de contexte de périphérique, dessiner sur la balise nécessite également d'abord d'obtenir un contexte de rendu. Nos graphiques ne sont pas dessinés directement à l'écran, mais d'abord dans le contexte (Context), puis actualisés à l'écran. .
Hors sujet : Pourquoi avons-nous besoin de créer un concept aussi compliqué que celui de « contexte » ? Grâce à l'objet contextuel, 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 s'occuper d'autres travaux. Pour le dire franchement, il s'agit de transformer divers. choses concrètes en abstractions unifiées, réduisant ainsi notre fardeau.
Obtenir le contexte est très simple, il suffit des deux lignes de code suivantes :
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d'); 🎜>Récupérez d'abord l'objet canevas, puis appelez la méthode getContext de l'objet canevas. Cette méthode ne peut actuellement transmettre que le paramètre "2d". Dans un avenir proche, elle peut prendre en charge le paramètre "3d". cela veut dire, 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 Canvas , la méthode est très simple, il suffit de déterminer si la fonction getContext existe, le code est le suivant :

Copiez le codeLe code est le suivant :

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("Supporte tag"
} else {
alert("La balise n'est pas prise en charge");
}



四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出

<canvas style="background-color: black" id="move_line" height="200" width="400">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> <script type="text/javascript"> var canvas = document.getElementById('move_line'); var ctx=canvas.getContext("2d"); //上下移动的直线 var width=400; var height=200; var y=0 var dir=1; ctx.strokeStyle = "rgb(255,0,0)"; function draw(){ ctx.clearRect(0,0,width,height) ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(width-1,y); ctx.stroke(); y=y+dir; if((y==0)||(y==(height-1))) dir=dir*(-1); } </script><p><input onclick="interval=setInterval(draw,10);" value="开始" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button">
提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器