hml5 canvas 介绍

html5引入了新的标签<canvas>，可以在其上面进行绘图操作。结合javascript可以做出相当复杂的客户端程序。

 

//canvas接口定义

//http://www.w3.org/TR/html5/the-canvas-element.html

interface HTMLCanvasElement : HTMLElement {

           attribute unsigned long width;

           attribute unsigned long height;

 

  DOMString toDataURL(in optional DOMString type, in any... args);

 

  object getContext(in DOMString contextId);

};

 

我们可以以如下方式定义一个canvas标签

<canvas id="example" width="200" height="200"></canvas>

 

对canvas的操作需要在context上进行，通过其getContext接口可以获取。

 

var ctx = document.getElementById("example").getContext("2d");

 

//2D Context接口定义

//http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#the-2d-drawing-context

interface CanvasRenderingContext2D {

 

  // back-reference to the canvas 

  readonly attribute HTMLCanvasElement canvas;

 

  // state 

  void restore(); // pop state stack and restore state

  void save();  // push state on state stack 

 

  // transformations (default transform is the identity matrix)

  void rotate(in float angle);

  void scale(in float x, in float y);

  void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

  void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

  void translate(in float x, in float y);

 

  // compositing 

  attribute float globalAlpha; // (default 1.0)

  attribute DOMString globalCompositeOperation; // (default source-over)

 

  // colors and styles 

  attribute any fillStyle; // (default black)

  attribute any strokeStyle; // (default black)

  CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);

  CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);

  CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);

  CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);

  CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

 

  // line styles 

  attribute DOMString lineCap; // "butt", "round", "square" (default "butt")

  attribute DOMString lineJoin; // "miter", "round", "bevel"  (default "miter")

  attribute float lineWidth; // (default 1)

  attribute float miterLimit; // (default 10)

 

  // shadows 

  attribute float shadowBlur; // (default 0)

  attribute DOMString shadowColor; // (default transparent black)

  attribute float shadowOffsetX; // (default 0)

  attribute float shadowOffsetY; // (default 0)

 

  // rects 

  void clearRect(in float x, in float y, in float w, in float h);

  void fillRect(in float x, in float y, in float w, in float h);

  void strokeRect(in float x, in float y, in float w, in float h);

 

  // Complex shapes (paths) API 

  void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

  void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

  void beginPath();

  void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

  void clip();

  void closePath();

  void fill();

  void lineTo(in float x, in float y);

  void moveTo(in float x, in float y);

  void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

  void rect(in float x, in float y, in float w, in float h);

  void stroke();

  boolean isPointInPath(in float x, in float y);

 

  // text 

  attribute DOMString font; // (default 10px sans-serif)

  attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")

  attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")

  void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);

  TextMetrics measureText(in DOMString text);

  void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);

 

  // drawing images 

  void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh);

  void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

  void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh);

  void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

  void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh);

  void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

 

  // pixel manipulation

  ImageData createImageData(in float sw, in float sh);

  ImageData createImageData(in ImageData imagedata);

  ImageData getImageData(in float sx, in float sy, in float sw, in float sh);

  void putImageData(in ImageData imagedata, in float dx, in float dy, optional in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);

};

 

interface CanvasGradient {

  // opaque object 

  void addColorStop(in float offset, in DOMString color);

};

 

interface CanvasPattern {

  // opaque object

};

 

interface TextMetrics {

  readonly attribute float width;

};

 

interface ImageData {

  readonly attribute CanvasPixelArray data;

  readonly attribute unsigned long height;

  readonly attribute unsigned long width;

};

 

interface CanvasPixelArray {

  readonly attribute unsigned long length;

  getter octet (in unsigned long index);

  setter void (in unsigned long index, in octet value);

};

 

这些接口对熟悉windows GDI编程的人可能比较熟悉，这里的context类似于windows的Device Context

这里举一个drawImage接口的例子

//https://developer.mozilla.org/en/Canvas_tutorial/Using_images

    var img = new Image();  

    img.onload = function(){  

      ctx.drawImage(img,0,0);  

      ctx.beginPath();  

      ctx.moveTo(30,96);  

      ctx.lineTo(70,66);  

      ctx.lineTo(103,76);  

      ctx.lineTo(170,15);  

      ctx.stroke();  

    }  

    img.src = 'images/backdrop.png';