HTML5 Canvas 绘图详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zanos/article/details/7101908

1. Canvas简介

单纯的canvas是指一块画布，你可以在这块画布上绘制任何你需要的图形图象内容。Canvas具有最基本的绘制区域的宽与高两个属性，以及该元素的名字属性。在使用之前可以用前面的检测方法得知当前浏览器是否支持canvas元素。定义一个画布：

<canvas id="mycanvas" width="400" height="400"></canvas>

在javasrcipt中，就可以在document里取得该画布的句柄：

var mycanvas = document.getElementById("mycanvas");

默认的画布在创建完成之后只是一块空白的白色区域，可以通过javascript填充画布，完成各种各样的效果，小至一个小图片、小图形，大到一个游戏等等。目前HTML 5只支持2D上下文，标准中提到未来可能会定义一个3D的上下文。所以现在getContext的参数一定只能传递"2d"。

最简单的画布绘制动作比如填充，你只需要拿到这个画布的句柄，然后得到它的上下文，就可以用fillRect方法填满整个区域。如上面的mycanvas，可以用如下代码完成填充：

定义画布：

<canvas id="mycanvas" width="400" height="400" onclick="fill_mycanvas()"></canvas>

<script language="Javascript">
function fill_mycanvas()
{
	var mycanvas = document.getElementById("mycanvas");
	var mycontext = mycanvas.getContext("2d");
	mycontext.fillRect(0, 0, 400, 400);
}
</script>

这样当单击画布的时候，就会将画布区域完全填充为当前设定的填充颜色。

矩形填充HTML 5规定了一系列方法：
fillStyle（按CSS颜色，某种模式或某种梯度填充）、fillRect（用当前颜色填充）、strokeStyle（与fillStyle类似，但是用于边框部分的绘制）、strokeRect（与fillRect类似，但用于边框部分的绘制）、clearRect（清除矩形区域）。

2. Canvas坐标系

Canvas使用的是以左上角为(0, 0)点，向右下方增大的坐标系。

3. Canvas绘制方法
1) Path绘制路径
Path可以认为是画线工具，它指定一个起始点和终止点，然后从两点之间绘制一条直线。用到的函数有：

moveTo(x, y);
lineTo(x, y);

但使用这些方法只是规定了系列的线条，并没有实际用某种颜色把它们画出来，所以需要设定一个绘制的颜色（也就是前文提到的填充颜色）。以黑色为例：

context.strokeStyle="#000";
context.stroke();

如绘制一个网格：可以参考如下页面。

<!DOCTYPE html>
<html>
<head>
<meta charset=gb2312" />
<title>Canvas</title>

<script language="Javascript">
function draw_grid()
{
	var mycanvas = document.getElementById("mycanvas");
	var mycontext = mycanvas.getContext("2d");
	for(var x=0.5; x<400; x+=10) {
		mycontext.moveTo(x, 0);
		mycontext.lineTo(x, 400);
	}
	
	for(var y=0.5; y<400; y+=10) {
		mycontext.moveTo(0, y);
		mycontext.lineTo(400, y);
	}
	
	mycontext.strokeStyle= "#eee";
	mycontext.stroke();
}
</script>

</head>

<body>
<p align=center>
<canvas id="mycanvas" width="400" height="400" onclick="draw_grid()"></canvas>
</p>

<p>
<br>
By zanosy@126.com
</p>

</body>
</html>

2) 文字
向canvas绘制文字的时，有3个属性需要指定:font（字体），textAlign（文字对齐方式），textBaseline（从起始点算起的文字位置）。而文字本身使用fillText方法就可以完成绘制。

如写Hello world，可以参考如下页面：

<!DOCTYPE html>
<html>
<head>
<meta charset=gb2312" />
<title>Canvas</title>

<script language="Javascript">
function draw_hello_world()
{
	var mycanvas = document.getElementById("mycanvas");
	var mycontext = mycanvas.getContext("2d");
	mycontext.font = "bold 12px sans-serif";
	mycontext.fillText("Hello world", 100, 100); //后两个控制方案的左上角绘制位置
}
</script>

</head>

<body>
<p align=center>
<canvas id="mycanvas" width="400" height="400" onclick="draw_hello_world()"></canvas>
</p>

<p>
<br>
By zanosy@126.com
</p>

</body>
</html>

3) 梯度
用梯度色绘制矩形区域，与用单色填充矩形区域方式相对应。可以用fillStyle来指定使用一个梯度色绘制矩形，如一个从黑到白梯度渐变的矩形可以参考如下页面：

<!DOCTYPE html>
<html>
<head>
<meta charset=gb2312" />
<title>Canvas</title>


<script language="Javascript">
function draw_hello_world()
{
	var mycanvas = document.getElementById("mycanvas");
	var mycontext = mycanvas.getContext("2d");
	var mygradient = mycontext.createLinearGradient(0, 0, 400, 0);
	mygradient.addColorStop(0, "white");
	mygradient.addColorStop(1, "black");
	mycontext.fillStyle = mygradient;
	mycontext.fillRect(0, 0, 400, 400);
}
</script>


</head>


<body>
<p align=center>
<canvas id="mycanvas" width="400" height="400" onclick="draw_hello_world()"></canvas>
</p>


<p>
<br>
By zanosy@126.com
</p>

</body>
</html>

4) 图片
最后是将图片绘制到canvas的方法。它可以支持将整图贴到canvas的某个区域，也可以支持将源图片截取一部分，贴到canvas的某个区域，所涉及到的方法有：
drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset=gb2312" />
<title>Canvas</title>

<script language="Javascript">
function draw_hello_world()
{
	var mycanvas = document.getElementById("mycanvas");
	var mycontext = mycanvas.getContext("2d");
	var somepic = new Image();
	somepic.src = "somepic.jpg";
	somepic.onload = function() {
		mycontext.drawImage(somepic, 0, 0);
	}
}
</script>

</head>

<body>
<p align=center>
<canvas id="mycanvas" width="400" height="400" onclick="draw_hello_world()"></canvas>
</p>

<p>
<br>
By zanosy@126.com
</p>

</body>
</html>

组合以上提到的元素，你就可以设计实现出各种需要绘制的网页应用（尤其是交互式应用）了。