Canvas是用于在Web画面中绘制位图的技术。当HTML4版本的网页中需要绘制图形时,必须使用Flash等插件,在有了Canvas以后,就在也不需要任何插件,只需要JavaScript就可以在页面上绘制图形了。
Canvas进行绘制的基本步骤
(1)取得Canvas对象
(2)从Canvas对象中获取绘图用的上下文
(3)使用上下文中的方法与属性进行绘制
1、获取Canvas对象,为了能从JavaScript中使用<canvas>标签,在<canvas>标签中追加id属性。
例如:
<canvas id="canvas" width="300" height="300"></canvas>
接着再使用document.getElementById()方法获取该canvas对象
<script>
var canvas=document.getElementById("canvas");//获取id属性为canvas的标签
</script>
2、获取Canvas对象绘图使用的上下文
仅仅取得Canvas对象是无法进行图形绘制的。要进行图形绘制,还必须由Canvas对象中取得绘图用的上下文(context)。直观的来说,Canvas对象就相当于绘图用的白纸,而上下文就相当于绘图用的画笔。
例如:将上下文种类指定为“2d”(二维图形)
var ctx=canvas.getContext("2d");//指定为二维图形
3、使用上下文的方法与属性进行绘图(在后续中会介绍到)
例如:指定颜色时使用fillStyle属性,绘制矩形时使用fillRect()方法等
ctx.fillStyle="rgb(255,0,0)";//指定填充颜色
ctx.fillRect(50,50,200,200);//绘制矩形
简单的程序案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制矩形</title>
<script type="text/javascript">
window.onload=function(){
//Canvas对象的取得
var canvas=document.getElementById("canvas");
//取得绘图用的上下文对象
var ctx=canvas.getContext("2d");
//绘图处理
ctx.fillStyle="rgb(255,0,0)";
ctx.fillRect(50,50,200,200);
ctx.fillStyle="rgb(0,0,255,0.5)";
ctx.fillRect(100,100,200,200);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
Canvas路径
路径是Canvas的图形绘制的基础。所谓的路径就是通常所说的“一笔绘图”的形式。在Canvas中,通过多次重复路径来绘制更复杂的图形。
绘制路径的基本步骤:
(1)取得Canvas绘图用的上下文
(2)调用beginPath()方法宣布路径绘制的开始
(3)使用moveTo()、lineTo()方法依次指定坐标与绘制直线
(4)调用closePath()方法结束路径结束
(5)调用fill()方法进行图形绘制
绘制一个简单的三角形:
(填充)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制三角形</title>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//路径绘制开始
ctx.beginPath();
//路径的绘制
ctx.moveTo(0,0);
ctx.lineTo(0,200);
ctx.lineTo(200,200);
//路径绘制结束
ctx.closePath();
//进行绘图处理
ctx.fillStyle="rgb(200,0,0)";
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="3000"></canvas>
</body>
</html>
(非填充)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制三角形(非填充)</title>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//路径绘制开始
ctx.beginPath();
//路径的绘制
ctx.moveTo(0,0);
ctx.lineTo(0,200);
ctx.lineTo(200,200);
//路径绘制结束
ctx.closePath();
//进行绘图处理
ctx.strokeStyle="#aa0000";//指定路径颜色
ctx.lineWidth=2;//指定路径线的粗细
ctx.stroke();//绘制路径
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="3000"></canvas>
</body>
</html>
进行路径绘制的各种方法:
方法 | 功能 |
beginPath() | 重置路径的开始 |
closePath() | 关闭到现在为止的路径 |
moveTo(x,y) | 指定绘图开始时的基点(x,y) |
lineTo(x,y) | 绘制从前一次绘图位置到(x,y)的直线 |
方法 | 功能 |
stroke() | 绘制路径 |
fill() | 填充路径 |
fillStyle | 指定填充时使用的颜色与样式 |
strokeStyle | 指定路径的线颜色与样式 |
lineWidth | 指定路径线的粗细,属性值为整数 |
------>>后续《Canvas画布进阶篇》