<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
try {
document.createElement("canvas").getContext("2d");//这一步就是创建一个Canvas元素,可以在上面画2d的图像。
//这一步的作用就是如果你的浏览器支持HTML5,它就执行下面的一句代码,在id="support"的div中显示支持HTML5的提示,否则如果不支持那么就会出错,执行catch代码中的代码。懂了吧!
document.getElementById("support").innerHTML = "你的浏览器支持HTML5。";
} catch (e) {
document.getElementById("support").innerHTML = "你的浏览器不支持HTML5,赶快升级一下吧!";
}
}
</script>
</head>
<body>
<div id="support"></div>
</body>
</html>
先来用最简单的方法划一条直线吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#diagonal
{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function drawDiagonal() {
//取得canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");//传入"2d"获取二维的上下文。听说传入3d的API工作已完成了,
//传入“webgl"即可获得三维的上下文,不过我在ie9中试了,结果context为null,看来IE9不支持WEBGL规范。
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//将这条线绘制到canvas画布上去。
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>
</head>
<body>
<canvas id="diagonal">
</canvas>
</body>
</html>
这里调用了三个方法:beginPath、moveTo和lineTo,传到这条线的起点和终点的坐标。相信大家应该都知道原点(0,0)是在左上角吧。
方法moveTo和lineTo实际上并不是画线,而是通过调用stroke方法完成线条绘制。效果如下:
像前面的对上下文的很多操作(如果moveTo、lineTo、beginPath、设置样式和外观的函数)都不会直接在页面上显示出来,只有当对路径应用绘制(stroke) or 填充(fill)方法时,才会显示那些操作的结果。
但是 ,这都是特别简单的画出来的,想要比较的复杂的东西,必须用到变换 。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>转换</title>
<style type="text/css">
#diagonal
{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function drawDiagonal() {
//取得canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//保存当前绘画状态,以便我们画完这副画以后,再恢复到这个状态,画另一副画。
context.save();
//向右下方移动绘图上下文
context.translate(70, 140);
//以原点为起点,绘制与前面相同的线段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
//将这条线绘制到canvas画布上去。
context.stroke();
//恢复原有的绘图状态
context.restore();
//可以开始另外一副绘图。。。。。。
}
window.addEventListener("load", drawDiagonal, true);
</script>
</head>
<body>
<canvas id="diagonal">
</canvas>
</body>
</html>
(请注意加红色背景的字)
1、首先通过ID找到并访问canvas对象。
2、接着通过调用canvas对象的getContext函数获取上下文对象。
3、接下来,保存尚未修改的context对象,这样我们即使通过moveTo、lineTo、translate等操作后,我们还是可以恢复到这个状态,然后开始绘画另一个副图,或者另外一些操作。
4、下一步是在context中调用translate函数。通过这个操作,当进行平移行为(moveTo)发生时,我们的提供的变换坐标{translate(70,140)}会被加到结果坐标{moveTo(0,0)}上去,结果移动到了坐标点(70,140){即横向:70,纵向:140}(我们暂时称坐标A吧)上面了。
5、上一步完成后,我们调用lineTo(70,-70),意思是在上一个坐标点(70,140)上横向加70(70+70=140),纵向减70(140-70=70),于是我们得一点(140,70)(我们暂时称为坐标B吧),得到两个坐标点后,lineTo方法告诉我们用一条直线把A、B这两个坐标点连起来。
6、在红条勾勒出来以后,可以通过调用context.stroke()函数将其结果显示在canvas上面。7、最后恢复到context.restore();
因为在这之后你肯定还要用到这个上下文对象去做其它的事情,如果就因为变换改变了那个对象,那绝对是不行的,所以我们虽然用
变换做了一个图,但是我们下面的这张图可能并不会用到变换,如果上面不保存,这里不恢复 ,相当于这个对象给污染了一样,所以
画完图以后,即刻恢复到原来的状态。