javascript 绘 ER图 js图形绘制

HTML5 Canvas 2D API 规范 1.0 中文版： http://wenku.baidu.com/view/d841013d0912a2161479292d.html 开始先学习三个方法：fillRect() strokeRect() clearRect()，它们接收四个参数，分别是：X轴坐标，Y轴坐标，宽，高 。

 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>