JavaScript绘制图形Canvas

 HTML5 Canvas 2D API 规范 1.0 中文版：

 http://wenku.baidu.com/view/d841013d0912a2161479292d.html

 

<canvas id="test"></canvas>

开始先学习三个方法：fillRect() strokeRect() clearRect()，它们接收四个参数，分别是：X轴坐标，Y轴坐标，宽，高 。

<script type="text/javascript">

var canvas = document.getElementById("test"); 

if(canvas.getContext){

var context = canvas.getContext("2d");//绘制一个2D绘图环境

context.fillStyle = "#ccc"; //颜色是#ccc的图形

context.fillRect(0,0,50,50); //fillRect绘制的是一个宽高各50的填充长方形

context.strokeRect(0,0,50,50); //strokeRect绘制的是边框长方形

  context.clearRect(30,30,10,10); //clearRect()是清除画布区域的一部分

} 

</script> 

 

下一个例子：

<script type="text/javascript">

var canvas = document.getElementById("test"); 

if(canvas.getContext){

   var context = canvas.getContext("2d");

//新路径建立

   context.beginPath();

 

//这个设置与CSS中设置字体一样，大小、字体、格式等

   context.font = "12px 微软雅黑";

//设置文字如何对齐，与CSS中text-align属性一样

   context.textAlign = "center";

//设置文字的基线，这个与CSS中的background:top;一样

   context.textBaseline = "top";

//我们要绘制的字符串是12，坐标是X100 Y80的位置

   context.fillText("时钟表",100,80); 

//绘制圆

   context.arc(100,100,99,0,2*Math.PI,false);

//arc有六个参数，xy是绘制中心点在100 100的弧，然后半径为99。

//角度是在0和2*Math.PI之间，逆时针方向。   

  

//绘制外圆

   context.moveTo(194,100);

//意思是把光标移动到194 100的这个坐标上，但是不绘制线条。

   context.arc(100,100,94,0,2*Math.PI,false);  

//绘制时针

  context.moveTo(100,100);

  context.lineTo(100,15);

//从最后一点移动到100 15这个坐标上，然后绘制一条直线

//路径描边

 context.stroke();

} 

</script>  

 

下一个例子：

<script type="text/javascript">

var canvas = document.getElementById("test");  

 

if(canvas.getContext){

   var context = canvas.getContext("2d");

//旋转中

   context.translate(100,100);

//将原点坐标移动到100 100坐标上。

//旋转弧度

  context.rotate(1);

//以1的弧度开始旋转

//保存状态

  context.fillStyle = "#ccc";

  context.translate(100,100);

  context.save();

//调用save()方法后，将把这一状态保存起来。

//退回状态

  context.restore();

}

</script>