L'utilisation de Canvas dans les lignes et surfaces de dessin html5

零下一度

Libérer： 2017-05-06 11:51:36

original

2003 Les gens l'ont consulté

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>

Copier après la connexion

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

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

Copier après la connexion

兼容性检查在不支持 <canvas> 标签的浏览器中如何展示替换内容。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：
var canvas = document.getElementById(&#39;tutorial&#39;);
if (canvas.getContext){
  var ctx = canvas.getContext(&#39;2d&#39;);
  // drawing code here
} else {
  // canvas-unsupported code here
}

Copier après la connexion

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);

Copier après la connexion

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();

Copier après la connexion

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!