HTML5系列：HTML5绘图

时间：2023-12-12 09:54:32

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)

　　其中，x表示矩形起点x轴与左上角(0, 0)之间的距离，y表示矩形起点y轴与左上角(0, 0)之间的距离，width表示矩形的宽度，height表示矩形的高度。

context.strokeRect(x, y, width, height)

　　其中x,y为矩形起点坐标，width为矩形宽度，height为矩形高度。

context.clearRect(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>

　　效果图

HTML5系列：HTML5绘图

2. 使用路径

　　在页面的canvas元素中，调用绘画路径的moveTo()及lineTo()方法可以绘制直线，调用arc()方法可以绘制指定位置与大小的圆形。

2.1 moveTo与lineTo的用法

　　在canvas元素中，如果要绘制直线，通常使用moveTo()与lineTo()两个方法。moveTo()方法用于将画笔移至指定点并以改点为直线的开始点，调用格式：

context.moveTo(x, y)

　　其中，x为移至起点的横坐标，y为移至起点的纵坐标。调用该方法后，canvas中即设置了一个绘制直线的开始点。如果是绘制直线还需要调用lineTo()方法，该方法将用画笔从指定的起点坐标与传递的终点坐标参数直接绘制一条直线。调用格式：

context.lineTo(x, y)

　　其中，x为移至的终点横坐标，y为移至终点的纵坐标。该方法可以反复使用，第一次调用后，画笔自动移至终点坐标位置；第二次调用时，又以该坐标位置作为第二次调用时的起点位置，开始绘制直线。当直线路径绘制完成后，调用stroke()方法在canvas中描边直线路径，最终在canvas中展示直线效果，调用格式：

context.stroke()

　　stroke()方法无参数，用于绘制完路径后对路径进行描边处理。

　　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.moveTo(200, 30);

            context.lineTo(30, 100);

            context.lineTo(200, 200);

            context.lineWidth = 1;

            context.stroke();

        }

    </script>

</head>

<body>

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

</body>

</html>

　　效果图

HTML5系列：HTML5绘图

　　设置描边颜色：

context.strokeStyle = "red";

2.2 绘制圆形

　　在canvas中，使用context对象中的arc()方法描绘圆形路径，以及绘制各种形状的圆形图案，调用格式：

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

其中，x表示绘制圆形的横坐标，y表示绘制圆形的纵坐标，radius表示绘制圆形的半径，单位为像素，startAngle表示绘制圆弧时开始角度，endAngle表示绘制圆弧时结束的角度，anticlockwise是一个布尔值，表示十分按顺时针绘制，如果为“true”表示按顺时针绘制；如果为“false”，表示按逆时针绘制。如果要绘制一个完整的圆形，startAngle的值为0，表示从0弧度开始，参数endAngle的值为Math.PI * 2，表示到360弧度时结束。如果要绘制一个半圆形，startAngle的值为0，endAngle的值为Math.PI * 1，表示到180弧度时结束。

　　在调用arc()方法绘制圆形路径之前，需要调用context对象中的beginPath()方法，声明开始绘制路径，调用格式：

context.beginPath()

　　在使用遍历或循环绘制路径时，每次都要调用该方法，beginPath()方法仅对应单次的路径绘制。

　　绘制圆形路径完成之后，需要调用closePath()方法，将所绘制完成的路径进行关闭，调用格式：

context.closePath()

closePath()是对应单次的路径绘制，在一般情况下，与beginPath()成对使用。

　　圆形路径绘制完成之后，并没有真正在canvas元素中展示，需要对路径进行描边或填充。

　　描边调用context对象的stroke()方法，在调用之前，可以设置边框的颜色与宽度。

context.strokeStyle = "#CCCCCC";

context.lineWidth = 1;

context.stroke();

　　填充调用context对象的fill()方法，在调用之前，可以设置填充的颜色。

context.fillStyle = "#EEEEEE";

context.fill();

　　示例

<!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.beginPath();

            context.arc(100, 100, 50, 0, Math.PI * 2, true);

            context.closePath();

            context.strokeStyle = "#666666";

            context.lineWidth = 1;

            context.stroke();

        }

    </script>

</head>

<body>

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

</body>

</html>

　　效果图

HTML5系列：HTML5绘图

<!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.beginPath();

            context.arc(100, 100, 50, 0, Math.PI * 2, true);

            context.closePath();

            context.strokeStyle = "#666666";

            context.lineWidth = 1;

            context.stroke();

            context.fillStyle = "#CCCCCC";

            context.fill();

        }

    </script>

</head>

<body>

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

</body>

</html>

　　效果图

HTML5系列：HTML5绘图

<!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.beginPath();

            context.arc(100, 100, 50, 0, Math.PI * 2, true);

            context.closePath();

            context.strokeStyle = "#666666";

            context.lineWidth = 1;

            context.stroke();

            context.fillStyle = "#CCCCCC";

            context.fill();

            context.beginPath();

            context.arc(175, 100, 50, 0, Math.PI * 2, true);

            context.closePath();

            context.strokeStyle = "#666666";

            context.lineWidth = 1;

            context.stroke();

        }

    </script>

</head>

<body>

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

</body>

</html>

　　效果图

HTML5系列：HTML5绘图

3. 绘制渐变图形

3.1 绘制线性渐变

　　渐变是指在填充时从一种颜色慢慢过渡到另一种颜色。线性渐变时需要使用context对象的createLinearGradient()方法，该方法定义：

context.createLinearGradient(xStart, yStart, xEnd, yEnd)

其中，xStart为渐变起始点的横坐标，yStart为渐变起始点的纵坐标，xEnd为渐变结束点的横坐标，yEnd为渐变结束点的纵坐标。

　　在LinearGradient对象之后，使用addColorStop()方法进行设定，该方法定义：

context.addColorStop(offset, color)

其中，offset为所设定的颜色离开渐变起始点的偏移量，该参数的值是一个范围在0到1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量为1。color为绘制时使用的颜色。

　　因为是渐变，所以至少需要使用两次addColorStop()方法以追加两个颜色，可以追加多个颜色。

　　接着把fillStyle设定为LinearGradient对象，执行fill()方法填充，可以绘制出渐变图形。

　　示例

<!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");

            var gl = context.createLinearGradient(0, 0, 0, 300);

            gl.addColorStop(0, "blue");

            gl.addColorStop(1, "red");

            context.fillStyle = gl;

            context.fillRect(0, 0, 500, 300);

        }

    </script>

</head>

<body>

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

</body>

</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.beginPath();

            context.arc(100, 100, 50, 0, Math.PI * 2, true);

            context.closePath();

            var gl = context.createLinearGradient(0, 0, 0, 150);

            gl.addColorStop(0, "blue");

            gl.addColorStop(1, "red");

            context.fillStyle = gl;

            context.fill();

        }

    </script>

</head>

<body>

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

</body>

</html>

　　效果图

HTML5系列：HTML5绘图

3.2 绘制径向渐变

　　径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式，使用context对象的createRadialGradient()方法绘制径向渐变，方法定义：

context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

其中，xStart为渐变开始圆的圆心横坐标，yStart为渐变开始圆的圆心纵坐标，radiusStart为开始圆的半径，xEnd为渐变结束圆的圆心横坐标，yEnd为渐变结束圆的圆心纵坐标，radiusEnd为结束圆的半径。

<!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");

            var gnt = context.createRadialGradient(30, 30, 0, 20, 20, 400);

            gnt.addColorStop(0, "#000000");

            gnt.addColorStop(0.3, "#EEEEEE");

            gnt.addColorStop(1, "#FFFFFF");

            context.beginPath();

            context.arc(125, 95, 80, 0, Math.PI * 2, true);

            context.closePath();

            context.fillStyle = gnt;

            context.fill();

            context.beginPath();

            context.arc(125, 95, 80, 0, Math.PI * 2, true);

            context.closePath();

            context.strokeStyle = "#666666";

            context.lineWidth = 1;

            context.stroke();

        }

    </script>

</head>

<body>

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

</body>

</html>

　　效果图

HTML5系列：HTML5绘图

相关文章