Maison > Article > interface Web > Exemple de partage de code des fonctionnalités de base de HTML5 Canvas
toile Les attributs et méthodes de base : width, height, getContext(), etc.
passe width et height pour obtenir et définir la largeur et la hauteur du canevas actuel ;
obtenir l'environnement de dessin (contexte) du canevas actuel via la méthode getContext() ;
context=canvas.getContext("2d");
le contexte contient toutes les méthodes et attributs dont nous avons besoin pour dessiner sur le canevas ; dans le système de coordonnées cartésiennes du
contexte , le canevas Le coin supérieur gauche est l'origine ; de l'origine vers la droite est la direction positive du Les méthodes sont toutes utilisées en conjonction avec
état actuel
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>s3</title> <script type="text/javascript" src="../script/modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); var Debugger = function() { }; Debugger.log = function(message) { try { console.log(message); } catch (exception) { return; } } function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function eventWindowLoaded() { canvasApp(); } function canvasApp() { if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); function drawScreen() { //以下代码来源于<http://www.cnblogs.com/nothingbrother/archive/2011/12/23/2299856.html> for(var x = 0.5; x < 550; x += 10) { context.moveTo(x, 0); context.lineTo(x, 400); } for(var y = 0.5; y < 400; y += 10) { context.moveTo(0, y); context.lineTo(550, y); } context.strokeStyle = "#cecece"; context.stroke(); context.beginPath(); context.moveTo(50, 150); context.lineTo(300, 150); context.moveTo(250, 100); context.lineTo(300, 150); context.moveTo(300, 50); context.lineTo(250, 100); context.moveTo(450, 200); context.lineTo(300, 50); /*symmetry*/ context.moveTo(50, 250); context.lineTo(300, 250); context.moveTo(250, 300); context.lineTo(300, 250); context.moveTo(300, 350); context.lineTo(250, 300); context.moveTo(450, 200); context.lineTo(300, 350); /*end*/ context.moveTo(50, 150); context.lineTo(50, 250); /*write coordinate*/ context.font = "bold 12px sans-serif"; context.fillText("( 0 , 0 )", 8, 5); context.fillText("(50, 150)", 58, 155); context.fillText("(300, 150)", 308, 155); context.fillText("(250, 100)", 258, 105); context.fillText("(300, 150)", 308, 155); context.fillText("(300, 50)", 308, 55); context.fillText("(50, 250)", 58, 255); context.fillText("(300, 250)", 308, 255); context.fillText("(250, 350)", 258, 355); context.fillText("(450, 200)", 458, 205); context.strokeStyle = "#f00"; context.stroke(); } drawScreen(); } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="550" height="400"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>; 🎜> Avant de vraiment comprendre comment fonctionne Canvas, l'état actuel est un concept qui doit être maîtrisé
l'état actuel est en fait une pile d'états de dessin, qui s'applique à l'ensemble du canevas dans son ensemble ; On peut opérer les états suivants :
Matrice de transformation (Matrice de transformation)
Région de découpage (découpage de région)Method:clip()
Methods:scale, rotate, transform, and translate
Propriétés du contexte (attribut de contexte)
Jetons-y un bref coup d'œil, et nous le ferons analyser lentement l'utilisation de ces propriétés et méthodes dans les prochains articles ;
Un petit programme (deviner des lettres) écrit par [oreilly] à l'étranger :
Properties: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, line Join, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, global CompositeOperation, font, textAlign, and textBaseline.
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!