标签：
canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。
在页面中使用canvas元素绘制图形需要经过的三个步骤：
步骤一 使用canvas元素创建一个画布区域，并获取该元素。
步骤二 通过获取的canvas元素，取得该图形元素的上下文环境对象。
步骤三 根据取得的上下文环境对象，在页面中绘制图形或动画。
<canvas id="cnvMain" width="500" height="300"></canvas>
使用canvas元素绘制矩形的步骤：
1> 获取canvas元素
使用document.getElementById()方法获取canvas对象，需要调用这个对象提供的方法来进行图形绘制。
2> 获取上下文（context）
进行图形绘制时，需要使用图形上下文（graphics context），图形上下文是一个封装了绘图功能的对象。使用canvas对象的getContext()来获得图形上下文。在draw函数中，将参数设置为“2d”。
3> 填充与绘制边框
canvas元素绘制图形的两种方式：填充（fill）与绘制边框（stroke），填充是指填满图形内部，绘制边框是绘制图形的边框。canvas元素结合使用这两种方式来绘制图形。
4> 设置绘图样式（style）
在进行绘制图形时，先要设定好绘图的样式，再调用方法进行图形绘制。
设定填充图形样式：fillStyle填充的样式，在该属性中填入填充的颜色值。
设定图形边框的样式：strokeStyle图形边框的样式，在该属性中填入边框的颜色值。
5> 指定线宽
使用图形上下文对象的lineWidth属性设置图形边框的宽度。在绘制图形的时候，任何直线都可以通过lineWidth属性来指定直线的宽度。
6> 指定颜色值
绘图时填充的颜色或边框的颜色分别通过fillStyle属性与strokeStyle属性来指定。颜色值使用CSS中使用的颜色值。
7> 绘制矩形
分别使用fillRect()与strokeRect()来填充矩形和绘制矩形边框。
context.fillRect(x, y, width, height)
context.strokeRect(x, y, width, height)
HTML代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 500, 300); context.fillStyle = "red"; context.strokeStyle = "blue"; context.lineWidth = 1; context.fillRect(50, 50, 100, 100); context.strokeRect(50, 50, 100, 100); } </script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> </body> </html>
效果图
标签：
原文地址：http://www.cnblogs.com/libingql/p/4439148.html
