canvas学习笔记 ---- 1
先来认识一下canvas。canvas到底是什么东西呢？其实，canvas就是一个现代浏览器中内建的一个画图的工具。对于html5来说，其中的canvas元素直接添加了对浏览器canvas画图方法的支持，结合javascript，我们可以画出任意的想要的图形。
要使用canvas元素，就和定义一个div一样简单。
1 <canvas id="can" width="500" height="400">这里写备注信息（针对不支持canvas元素的浏览器）</canvas>
canvas只是一小部分，还有一部分很重要的就是2d渲染。
我们用canvas绘图，实际上不是直接在canvas上面绘制，而是调用javascript的API通过canvas元素在浏览器的2d渲染环境中绘制。所谓2d渲染，可以简单的理解成一个绘图环境。
下面是一个简单的绘制矩形：
1 <!doctype html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8"/> 5 5 <title>简单的矩形绘制</title> 6 <script type="text/javascript"> 7 var canvas = document.getElementById('can'); //找到canvas元素 8 var content = canvas.getContext('2d'); //开启2d渲染 9 content.fillStyle = '#f00'; //设置绘制图形的颜色 10 content.fillRect(100,100,50,80); //这句代码将在画布上绘制一个距离浏览器上面100px，左边100px，宽50px，高80px的红色矩形 11 </script> 12 6 </head> 13 7 <body> 14 8 <canvas id="can" width="500" height="400">对不起，您的浏览器不支持！</canvas> 15 9 </body> 16 10 </html>
其中，fillRect有4个参数，分别是要绘制的图形距离浏览器的x，y坐标和宽度以及高度。
由上可以知道，绘制一个简单的矩形是多么的简单。
下面，增加一点复杂度，绘制一个边框为5px，颜色为红色的矩形。
1 <!doctype html> 2 2 2 <html> 3 3 3 <head> 4 4 4 <meta charset="utf-8"/> 5 5 5 <title>简单的矩形绘制</title> 6 6 <script type="text/javascript"> 7 7 var canvas = document.getElementById('can'); //找到canvas元素 8 8 var content = canvas.getContext('2d'); //开启2d渲染 9 9 content.strokeStyle = '#f00'; //设置绘制图形的边框颜色 10 content.lineWidth = 5; 11 10 content.strokeRect(100,100,50,80); //这句代码将在画布上绘制一个距离浏览器上面100px，左边100px，宽50px，高80px的边框为5px红色的矩形 12 11 </script> 13 12 6 </head> 14 13 7 <body> 15 14 8 <canvas id="can" width="500" height="400">对不起，您的浏览器不支持！</canvas> 16 15 9 </body> 17 16 10 </html>
