HTML5：canvas之绘制图形

https://developer.mozilla.org/cn/Canvas_tutorial/Drawing_shapes

1  绘制矩形

fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

例子：

function draw(){
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');//得到画笔
    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

　　效果图

　　　　

2. 绘制路径 draw path

beginPath()
closePath()
stroke()
fill()

moveTo(int x,int y)

　　beginPath() : 创建一个路径

      closePath()  : 关闭一个路径

      stroke() : 空心填充路径 

      fill()        : 实心填充路径。调用fill时会自动关闭路径，不需要在调用chosePath()

     moveTo(int x,int y): 设置路径的起始点坐标

 

3. 绘制直线

lineTo(x, y)

　例子：

function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('tutorial');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25,25);
    ctx.lineTo(105,25);
    ctx.lineTo(25,105);
    ctx.fill();
    
    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(125,125);
    ctx.lineTo(125,45);
    ctx.lineTo(45,125);
    ctx.closePath();
    ctx.stroke();

  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}

　效果图：

　　

 

４.　绘制弧线

arc(x, y, radius, startAngle, endAngle, anticlockwise)

　　ｘ，ｙ　：　圆心坐标

      radius  ： 半径

     startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准）

     anticlockwise 为 true 表示逆时针，反之顺时针

     例子：

function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('tutorial');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    // Draw shapes
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
    ctx.stroke();

  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}

　　效果图：

　　

 

５.贝塞尔和二次方曲线 Bezier and quadratic curves

quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)