在Canvas中有直线和曲线两种基本图形。本文将讲述Canvas直线图形的绘制,并详细讲述直线、矩形、多边形这三种常见直线图形的绘制。
Canvas坐标系介绍
数学坐标系(笛卡尔坐标系)常在数学中运用,而在前端开发中CSS3、Canvas、SVG等使用的都是W3C坐标系,这一点需要时刻谨记。
- 数学坐标系:y轴正方向朝上;
- W3C坐标系:y轴正方向朝下;
绘制直线(线段)
绘制一条线段
在Canvas中,moveTo()和lineTo()这两个方法配合使用来绘制线段。
下面这个示例绘制了上面坐标系中的线段AB,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制直线</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 0.0625rem;"></canvas>
</body>
<script>
function get_dom(id){
return document.getElementById(id);
}
window.onload = function(){
var canvas = get_dom("canvas");
var cxt = canvas.getContext("2d");
cxt.moveTo(80,20);
cxt.lineTo(20,60);
cxt.stroke();
}
</script>
</html>
我们在纸上画一条线段一般都是先找个起始点,然后确定终点,最后连接两个端点,canvas也是这样。
首先使用getContext('2d')
获取上下文环境对象context。然后使用moveTo()
将画笔移到坐标A(80,20)
,moveTo()
的含义是“将画笔移到该点(x1, y1)位置上,然后开始绘图”。再使用lineTo()
将画笔从起点A画到终点坐标B(20,60)
。
如果是在纸上画,这样就已经结束了,但是在Canvas中,moveTo()
和lineTo()
仅仅是确定线段的“起点坐标”和“终点坐标”这两个状态,但是实际上画笔还没开始“动”。因此我们还需要调用上下文对象的stroke()
方法保存状态。
绘制多条线段
使用moveTo()
和lineTo()
可以画一条线段,如果我们要同时画多条直线,也是使用这两个方法。lineTo()
方法是可以重复使用的,第一次使用lineTo()
后,画笔将自动移到终点坐标位置,第二次使用lineTo()
后,Canvas会以“上一个终点坐标”作为第二次绘制的起点坐标,然后再开始画线段,以此类推。如果第二条直线需要用一个新的起点,使用moveTo()
方法移动画笔即可。
下面是一个示例,绘制上面图片里的三个线段,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制直线</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 0.0625rem;"></canvas>
</body>
<script>
function get_dom(id){
return document.getElementById(id);
}
window.onload = function(){
var canvas = get_dom("canvas");
var cxt = canvas.getContext("2d");
cxt.moveTo(80,20);
cxt.lineTo(20,60);
cxt.lineTo(80,120);
cxt.moveTo(20,80);
cxt.lineTo(80,140)
cxt.stroke();
}
</script>
</html>
所以如果使用Canvas绘制三角形、四边形等多边形就很简单了,绘制首尾相连的多边形即可,下面是一个绘制正方向的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制直线</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 0.0625rem;"></canvas>
</body>
<script>
function get_dom(id){
return document.getElementById(id);
}
window.onload = function(){
var canvas = get_dom("canvas");
var cxt = canvas.getContext("2d");
cxt.moveTo(20,20);
cxt.lineTo(20,60);
cxt.lineTo(60,60);
cxt.lineTo(60,20);
cxt.lineTo(20,20);
cxt.stroke();
}
</script>
</html>
效果如下:
Canvas中的矩形绘制
前面使用moveTo()
和lineTo()
这两个方法的配合使用绘制了一个正方形。通过画4条线段来绘制正方形代码过于繁琐,因此在实际开发中一般不采用前面的方法绘制矩形/正方形。
在Canvas中,矩形分为描边矩形和填充矩形这两种,而且提供了单独的方法,直接调用即可。
描边矩形
strokeStyle
属性和strokeRect()
方法配合使用来绘制描边矩形。strokeStyle
是context对象的一个属性,strokeRect()
是content对象的一个方法。
strokeStyle属性值
cxt.strokeStyle = "属性值";
strokeStyle属性取值有三种,即颜色值、渐变色、图案。
颜色值支持十六进制颜色值、颜色关键字、rgb颜色值、rgba颜色值。颜色值默认为#000000
。渐变色和图案暂时不说。
strokeRect()方法
cxt.strokeRect(x,y,width,height);
这段代码对应下图所示:
注意:
strokeStyle属性必须在strokeRect()方法之前定义,否则strokeStyle属性无效。
下面用strokeStyle
和strokeRect
重新绘制前面的正方形,并设置边为绿色,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制直线</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 0.0625rem;"></canvas>
</body>
<script>
function get_dom(id){
return document.getElementById(id);
}
window.onload = function(){
var canvas = get_dom("canvas");
var cxt = canvas.getContext("2d");
cxt.strokeStyle="green";
cxt.strokeRect(20,20,40,40);
}
</script>
</html>
效果如下:
填充矩形
在Canvas中,用fillStyle
属性和fillRect()
方法配合使用来画填充矩形。
fillStyle属性值
fillStyle属性跟strokeStyle属性一样,取值也有颜色值、渐变色、图案。
cxt.fillStyle="属性值"
fillRect()方法
cxt.fillRect(x,y,width,height);
fillRect()
方法和strokeRect()
的各参数意思一样。
注意:fillStyle
必须在fillRect()
之前设置。
下面将前面的正方形用填充矩形重新绘制,填充色为绿色,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制直线</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 0.0625rem;"></canvas>
</body>
<script>
function get_dom(id){
return document.getElementById(id);
}
window.onload = function(){
var canvas = get_dom("canvas");
var cxt = canvas.getContext("2d");
cxt.fillStyle="green";
cxt.fillRect(20,20,40,40);
}
</script>
</html>
效果如下:
当然填充矩形和描边矩形也可以一起使用,下面是一个代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制直线</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 0.0625rem;"></canvas>
</body>
<script>
function get_dom(id){
return document.getElementById(id);
}
window.onload = function(){
var canvas = get_dom("canvas");
var cxt = canvas.getContext("2d");
cxt.fillStyle="black";
cxt.fillRect(20,20,40,40);
cxt.fillStyle="green";
cxt.fillRect(20,20,40,40);
cxt.fillStyle="black";
cxt.fillRect(50,50,40,40);
}
</script>
</html>
效果如下:
rect()方法直接绘制矩形
在Canvas,除了使用strokeRect()
和fillRect()
可以绘制矩形外,使用rect()
方法也可以绘制矩形。
cxt.rect(x,y,width,height);
rect()+stroke()
cxt.strokeStyle = "green";
cxt.rect(20,20,40,40);
cxt.stroke();
效果等同于:
cxt.strokeStyle="green";
cxt.strokeRect(20,20,40,40);
rect()+fill()
cxt.fillStyle = "green";
cxt.rect(20,20,40,40);
cxt.fill();
效果等同于:
cxt.fillStyle="green";
cxt.fillRect(20,20,40,40);
clearRect()方法清空矩形区域
在Canvas中,clearRect()
方法用来清空矩形区域。
cxt.clearRect(x,y,width,height);
一个简单示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制直线</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 0.0625rem;"></canvas>
</body>
<script>
function get_dom(id){
return document.getElementById(id);
}
window.onload = function(){
var canvas = get_dom("canvas");
var cxt = canvas.getContext("2d");
cxt.fillStyle="black";
cxt.fillRect(20,20,40,40);
cxt.fillStyle="green";
cxt.fillRect(20,20,40,40);
cxt.fillStyle="black";
cxt.fillRect(50,50,40,40);
cxt.clearRect(25,25,15,15);
}
</script>
</html>
效果如下:
cxt.clearRect(0, 0, canvas.width, canvas.height);
上面这段代码用于清空整个Canvas画布。canvas.width获取Canvas画布宽度,canvas.height表示获取Canvas画布的高度(canvas是指上述代码示例中用document.getElementById(id)获取的canvas对象)。
Canvas绘制正多变形
前面绘制了正方形,理论上任意正多边形都可以绘制出来,
依次类推,可以推导正n边形各坐标点,下面是代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制直线</title>
</head>
<body>
<canvas id="canvas" width="800" height="800" style="border: 0.0625rem;"></canvas>
</body>
<script>
function get_dom(id){
return document.getElementById(id);
}
// 绘制多边形函数
// cxt : context上下文对象,
// x0,y0 : 正多边形中心坐标点,即(x0,y0)
// n :正n边形
// size: 边长
function create_n(cxt,x0,y0,n,size){
cxt.beginPath();
var jd = 2*Math.PI/n;
for (var i=0;i<n;i++) {
var x = Math.cos(i*jd)*size+x0;
var y = Math.sin(i*jd)*size+y0;
console.log(x,y)
cxt.lineTo(x,y);
}
cxt.closePath();
}
window.onload = function(){
var canvas = get_dom("canvas");
var cxt = canvas.getContext("2d");
// 绘制中心点O(100,100),边长为50的正八边形
create_n(cxt,100,100,8,50);
cxt.stroke();
}
</script>
</html>
效果如下:
同理还可以用这些绘制五角星、六芒星等,绘制之前在纸上计算清楚。
总结
利用Canvas可以绘制各种常见的几何图形,可以深入学习。