HTML5系列：HTML5绘图

浏览数：24 / 时间：2015年06月09日

1. canvas元素基础

　　canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。

　　在页面中使用canvas元素绘制图形需要经过的三个步骤：

　　步骤一 使用canvas元素创建一个画布区域，并获取该元素。

　　步骤二 通过获取的canvas元素，取得该图形元素的上下文环境对象。

　　步骤三 根据取得的上下文环境对象，在页面中绘制图形或动画。

1.1 页面添加canvas元素

<canvas id="cnvMain" width="500" height="300"></canvas>

1.2 绘制矩形

　　使用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>