Maison > Article > interface Web > L'utilisation de Canvas dans les lignes et surfaces de dessin html5
L'utilisation de Canvas dans les lignes et surfaces de dessin html5
- 零下一度original
- 2017-05-06 11:51:361989parcourir
Nous savons que la toile est une toile. Aujourd'hui, nous allons dessiner des lignes et des surfaces sur la toile.
1. Le canevas en Html
<!doctype html> <html lang="en"> <head> <title>Canvas 2D画线和面</title> </head> <body> <canvas id="cv" width="150" height="150"></canvas> </body> </html>
canvas est un élément en HTML5 Lorsque la largeur et la hauteur ne sont pas définies, le canevas initialise la largeur à. 300 pixels et la hauteur est de 150 pixels. L'élément peut être dimensionné à l'aide de CSS ; si l'image s'étire pour s'adapter à ses dimensions frame lorsqu'elle est dessinée, les dimensions CSS ne seront pas cohérentes avec les proportions du canevas initial et une distorsion se produira.
2. Contexte de rendu
Le canevas est initialement vierge. Pour démontrer, le script doit d’abord trouver le contexte de rendu, puis s’en servir. L'élément 5ba626b379994d53f7acf72a64f9b697 possède une méthode getContext(), qui est utilisée pour obtenir le contexte de rendu et sa fonction de dessin. getContext() n'a qu'un seul paramètre, le format du contexte. Pour les images 2D, vous pouvez utiliser CanvasRenderingContext2D.
var canvas = document.getElementById('cv'); var ctx = canvas.getContext('2d');
兼容性检查在不支持 <canvas> 标签的浏览器中如何展示替换内容。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}3. Dessiner un carré
a obtenu le contexte, tout comme pour obtenir le pinceau. À ce moment, nous dessinons un carré sur le. canvas :
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);
CanvasRenderingContext2D.fillRect() est la méthode de Canvas 2D API pour dessiner un rectangle rempli. Le point de départ du rectangle est à la position (x, y). Les dimensions du rectangle sont la largeur et la hauteur. L'attribut fillStyle détermine le style du rectangle.
4. Tracez une ligne
De même, tracer une ligne est également une méthode d'appel de ctx :
ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100, 100); ctx.stroke();
CanvasRenderingContext2D.stroke() est l'API Canvas 2D utilisant non nul Règles d'enroulement, une méthode pour tracer le chemin actuel ou existant en fonction du style de dessin de ligne actuel.
Dans le code ci-dessus, nous dessinons d'abord un chemin, puis restituons le chemin en utilisant le style actuel via la méthode des traits.
[Recommandations associées]
1. Tutoriel vidéo en ligne h5 gratuit
2. Manuel de la version complète HTML5
.3. Tutoriel vidéo html5 original php.cn
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!