Canevas html: Introduction

Dans ce tutoriel, nous n'allons considérer que les dessins en 2d; ceux en 3d seront éventuellement discutés dans un tutoriel sur WebGL.

Nous supposons que vous êtes familier avec javascript. Dans tous nos exemples, nous allons utiliser un canevas html similaire à ce qui est décrit ci-dessus:

Si vous êtes curieux, vous pouvez voir (et modifier!) le code véritablement utilisé pour générer la fenêtre de droite en cliquant sur l'image ci-dessus. Le code peut paraître intimidant ... mais les méthodes utilisées devraient vous êtes familières une fois que vous aurez compléter ce tutoriel.

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      canvas {border: 2px solid green;}
    </style>
  </head>
  <body>
    <p>Suivez les instructions pour apprendre à connaître
      les coordonnées d'un canevas.
    </p>
    <canvas height="300" id="canvas" width="400"> </canvas>
    <h2>Pour le lecteur plus avancé</h2>
    <p>Si vous examinez le code, et qu'ensuite vous déplacez votre
      souris très lentement à l'intérieur du canevas, vous allez
      constater que l'information donnée ne semble pas être conforme
      à la taille déclarée du canevas, mais plutôt à celle d'un canevas
      plus grand.  Pouvez-vous pensez à la cause de cette différence?
      Si oui, pouvez-vous penser à une façon de modifier le code et vérifier
      votre hypothèse?</p>
  </body>
  <script>
// quick hack
var $ = parent.$;
var ctx = $('#canvas', document)[0].getContext("2d");
var canvasMinX = $("#canvas", document).offset().left;
var canvasWidth = $("#canvas", document).width();
var canvasMaxX = canvasMinX + canvasWidth;
var canvasMinY = $("#canvas", document).offset().top;
var canvasHeight = $("#canvas", document).height();
var canvasMaxY = canvasMinY + canvasHeight;
var canX;
var canY;
var draw_mouse_info = false;
var ar1, ar2;

$("#canvas", document).bind("mouseleave", function (){
      draw_mouse_info = false;});
$("#canvas", document).bind("mouseenter", function (){
      draw_mouse_info = true;});
$("#canvas", document).bind("mousemove", function (evt){
  canX = evt.pageX - canvasMinX;
  canY = evt.pageY - canvasMinY;
  });

var mouse = function() {
var x, y;
    ctx.beginPath();
    ctx.fillStyle = "#0000aa";
    ctx.arc(canX, canY, 5, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
  ctx.font = "10pt Helvetica";
  ctx.fillStyle = "black";
  x = Math.min(canX, canvasWidth-70);
  y = Math.min(canY, canvasHeight-15);
  ctx.fillText("(" + canX + ", " + canY + ")", x+5, y+5);
};

function HorizontalArrow(x1, y1, colour) {
   this.x1 = x1 + 0.5;
   this.y1 = y1 + 0.5;
   this.colour = colour;
   this.del = 5;

this.draw = function (x2, y2) {
   ctx.beginPath();
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 + this.del, this.y1 + this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 + this.del, this.y1 - this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(x2, y2);
   ctx.lineTo(x2 - this.del, y2 + this.del);
   ctx.moveTo(x2, y2);
   ctx.lineTo(x2 - this.del, y2 - this.del);

ctx.strokeStyle = this.colour;
   ctx.stroke();
   }
}

function VerticalArrow(x1, y1, colour) {
   this.x1 = x1 + 0.5;
   this.y1 = y1 + 0.5;
   this.colour = colour;
   this.del = 5;

this.draw = function (x2, y2) {
   ctx.beginPath();
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 - this.del, this.y1 + this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 + this.del, this.y1 + this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(x2, y2);
   ctx.lineTo(x2 - this.del, y2 - this.del);
   ctx.moveTo(x2, y2);
   ctx.lineTo(x2 + this.del, y2 - this.del);

ctx.strokeStyle = this.colour;
   ctx.stroke();
   }
}

ar1 = new HorizontalArrow(0, 125, "#0000cc");
ar2 = new VerticalArrow(105, 0, "#00cc00");

draw_mouse = false;
function update() {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  if (draw_mouse_info){
    mouse();
    info.draw();
  }
  else{
    instructions();
  }
}
setInterval(update, 20);
  </script>
</html>

Votre cahier de notes

Garder vos notes personnelles ici. Ces notes sont entreposées par votre navigateur sur votre propre ordinateur, et seront disponible à partir de n'importe quelle page de ce site. Vous pouvez choisir d'utiliser la syntaxe html pour les formatter.