【转】canvas初探

0,canvas一些初始化操作

html：

<!--

  在html里写入canvas标签

  宽高必须设置

  还可以设置其他css样式

  canvas标签内写入浏览器不支持canvas标签时应该显示的文字

  -->

<canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

 

js：

//通过id获取canvas元素对象 

var mycanvas=document.getElementById('myCanvas');

//通过canvas获取上下文  这里我们选择2d
var context = mycanvas.getContext('2d');   

 

通过如上设置，我们就可以在canvas上用js作画了！

 

1,画弧（圆）

//开始路径

  context.beginPath(); 

//画圆（圆心x坐标，圆心y坐标，半径，开始弧度，结束弧度，顺时针还是逆时针）
  context.arc(100, 100, 50, 0, 2*Math.PI, false); 

//描边  或者填充 context.fill();可以设置 context.fillStyle或者context.strokeStyle。只有执行了此步才能在canvas里显示图形

  context.stroke();

 

2,画直线 
  context.beginPath();   

//把坐标移到目标位置
  context.moveTo(100,150);

//开始画线 
  context.lineTo(100,250); 

//描边
  context.stroke();

 

 3,填充方块

  //绘制填充颜色的矩形            
  context.fillStyle = "rgba(200,0,0,1)";  
  context.fillRect(300,300,50,50);  

  //绘制带有边框的矩形

  strokeRect(x,y,width,height);

  //清空绘制的矩形区域，并使之透明；

  clearRect(x,y,width,height);

 

4,文字

  context.strokeStyle = 'black';   //描边样式
  context.lineWidth = 1;  //描边宽度

  context.fillStyle    = '#00f';   //填充样式
  context.font         = 'normal  30px sans-serif';   //字体设置
  context.textBaseline = 'top';  //HTML画布垂直对齐的文本，我们可以使用的textBaseline在画布范围内的属性值。textBaseline可以设置以下值之一 ：top, hanging, middle, alphabetic, ideographic, and bottom。 

 
  context.fillText  ('Hello canvas!', 200, 0); //填充出来的文字
  context.strokeText('忍', 200, 50);   //描边出来的文字（空心）

 

5,贝塞尔曲线

//二次贝塞尔曲线

context.moveTo(400,400);
context.quadraticCurveTo(450,350,500,400); //设置基准点坐标和终点坐标
context.stroke();

 

//三次贝塞尔曲线

context.moveTo(500,500);
context.bezierCurveTo(500,350,550,550,600,600);//设置两个基准点坐标和终点坐标
context.stroke();

基准点不同可以有不同的曲线效果：

博客来源：http://hi.baidu.com/shawn_html5/item/580ac61f6764eddd65eabfb7 by 谢帅shawn