jeudi 27 septembre 2012

HTML5 canvas

In thid post you can find some usefull code snipets on HTML5 Canvas.
You may need to include the following javascript files into your main HTML page:
  • Modernizr.js which is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
  • jQuery.js which is Javascript library for rapid web development that simplifies many things like event handling, document traversing, etc.
First, check if the Canvas is supported in the browser:
if (!Modernizr.canvas) {
  return
} else {
  // do something
}
Declare the canvas in HTML
<canvas id="canvas" width="500" height="500">Your browser does not support HTML5</canvas>
Get the canvas element in Javascript
canvas = document.getElementById("canvas");
Get a drawing area for 2D arts
context = canvas.getContext("2d");

Draw a rectangle (only the border)
context.strokeStyle = "#000000";
context.strokeRect(0, 0, canvas.width, canvas.height);
Draw a circle filled in black
context.fillStyle = color;
context.arc(centerX,centerY,radius,0,2*Math.PI);
context.fill();
Type text on a given position x, y
context.fillStyle = color;
context.font = '30px_sans';
context.textBaseline = 'top';
context.fillText ("This is a text", x, y);
Draw a line from x1,y1 to x2,y2
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke(); 

Listen for mouse events (down, move, up) on a Canvas element:
canvas.addEventListener('mousedown', mouseEventHandler, false);
canvas.addEventListener('mousemove', mouseEventHandler, false);
canvas.addEventListener('mouseup',   mouseEventHandler, false);

function mouseEventHandler(event) {
  if (event.type == "mousedown") {
     // Mouse Down
  } else if (event.type == "mousemove") {
     // Mouse Move
  } else if (event.type == "mouseup") {
     // Mouse Up
  }
}
Get the mouse coordinates x, y on the canvas.
// returns the coordinates (x, y) of a mouse after click event
function mouseCoordinates(event) {
  var x, y;
  // Get the mouse position relative to the canvas element
  if(event.layerX || event.layerX == 0) { //Firefox
    x = event.layerX;
    y = event.layerY;
  } else if (event.offsetX || event.offsetX == 0) { //Opera
    x = event.offsetX;
    y = event.offsetY;
  }
  return {x:x, y:y};
}
Here is sample project of HTML5-based paint that combine the different things exposed earlier: index.html, webpaint.js.

References

Aucun commentaire:

Enregistrer un commentaire