canvas 学习笔记

周末之余很是无聊，因此看看HTML5 canvas 以下是学习笔记，写得比较简单，纯属自己个人记录。。

 

1：canvas arc()方法

以下是w3c上的描述:

 

arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。

方法-参数:

 

 

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

参数说明:

 

 

x, y	描述弧的圆形的圆心的坐标。
radius	描述弧的圆形的半径。
startAngle, endAngle	沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。 沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。
counterclockwise	弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。

 

下面是我的实例。。。(欢迎拍砖)

 

function drawPath(canvas_id){
        var canvas_doc = document.getElementById(canvas_id);
        if(canvas_doc == null){return false;}
        var context = canvas_doc.getContext('2d');        if(context == null){return false;}        context.fillStyle = "#EEEEFF";
        context.fillRect(0,0,600,700);
       
       
        var endAngle = Math.PI*2;//结束角度
        var anticlockwise = true;//是否按照顺时针方向绘图
        for(var i =0;i<10;i++){
            context.beginPath();
            context.arc(i*25,i*25,i*10,0,endAngle,anticlockwise);
            context.closePath();
            context.fillStyle='rgba(225,0,0,0.25)';
            context.fill();
        }
       
  }

 

 说明注意 ：

注意

context.beginPath();

context.closePath();

放得位置，放在循环外和循环内有不同的效果哦。。。

 

 2：canvas lineTo(),moveTo()方法

moveTo(x,y) 方法可把窗口的左上角移动到一个指定的坐标。

 

lineTo(x,y) 方法为当前子路径添加一条直线。

x,y坐标横纵坐标

 

照旧实例：

 

function drawMToL(canvas_id){
        var canvas_doc = document.getElementById(canvas_id);
      if(canvas_doc == null){return false;}
      var context = canvas_doc.getContext('2d');
      if(context == null){return false;}
      context.fillStyle = "#EEEEFF";
      context.fillRect(0,0,600,700);
    
      context.beginPath();
      context.fillStyle = '#64fa64';
      context.strokeStyle = '#000064';

      context.moveTo(10,20);
      context.lineTo(40,50);
      context.lineTo(100,300);
      context.lineTo(10,20);
      context.closePath();
      context.fill();
      context.stroke();
  }

 

 

 

 说明：暂无

 注意：我觉得这2个方法是基础。。任何复杂的图形都缺其不可

 比如下面这个例子

 

 function drawLine_M(canvas_id){
        var canvas_doc = document.getElementById(canvas_id);
      if(canvas_doc == null){return false;}
      var context = canvas_doc.getContext('2d');
      if(context == null){return false;}
      context.fillStyle = "#EEEEFF";
      context.fillRect(0,0,600,700);
      var dx = 150;
      var dy = 150;
      var s = 100;
      context.beginPath();
      context.fillStyle = '#64fa64';
      context.strokeStyle = '#000064';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI/15*11;
      
      for (var i=0; i < 30; i++) {
          var x = Math.sin(i*dig);
          var y = Math.cos(i*dig);
          context.lineTo(dx+x*s,dy+y*s);
      };
      context.closePath();
      context.fill();
      context.stroke();
  }