canvas绘制图形——直线、多边形、七巧板

前言

canvas 是 html5 中的一个新元素，主要用于图形的绘制，通过 JavaScript 来控制。<canvas> 标签定义一个图形容器，也可以叫做画布，通过 js 脚本可以绘制出各种各样的图像。

创建canvas

创建 canvas 只需要添加 canvas 标签就可以了，在创建时，除 id 外一般还会定制画布尺寸（width height）。定义画布尺寸不建议使用 css 的方式定制，这里的尺寸也定义了画布内部的分辨率，是 w3c 的标准用法。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>CanvasDemo</title>
</head>
<body>
    <canvas id="canvas" width="768" height="768"></canvas>
</body>
</html>

绘制图形

在 js 中首先要对 canvas 对象初始化。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');	// 使用 2d 画图

绘制直线

绘制直线用到的两个函数主要是 context.moveTo(x1, y1) 和 context.lineTo(x2, y2)。表示一条从 (x1, y1) 到 (x2, y2) 的直线， context.lineTo( ) 函数可以多次调用实现多笔画。然后调用 context.stroke( ) 绘制。

// 状态设置
context.moveTo(100,100)	// 起点
context.lineTo(700,700)	
context.lineTo(700,100)
context.lineWideh = 5	// 画笔宽度
context.strokeStyle = "#005588"	// 画笔样式，主要指颜色
// 绘制
context.stroke();

绘制多边形

使用 context.lineTo( ) 可以实现多笔画，因此回到起点的话，就绘制出了一个多边形。

context.moveTo(100,100)	// 起点
context.lineTo(700,700)	
context.lineTo(700,100)
context.lineTo(100,100)	// 回到起点

context.stroke();

上述例子中就绘制了一个空心三角形，我们可以使用 context.fill( ) 来给三角形着色。用法如下：

context.fillStyle = "rgb(2,100,30)";
context.fill();

绘制多个图形

在实际应用中，大部分情况下不会只绘制一条直线或一个图形，当要在一个画布中绘制多个图形时，要使用 context.beginPath( ) 和 context.closePath( )。

context.beginPath();
context.moveTo(100,100)	// 起点
context.lineTo(700,700)	
context.lineTo(700,100)
context.lineTo(100,100)	
// 绘制
context.fillStyle = "rgb(2,100,30)";
context.fill();
context.stroke();
context.closePath();
            
context.beginPath();
context.moveTo(100,200)	// 起点
context.lineTo(600,700)	
// 绘制
context.strokeStyle = "blue";
context.lineWidth = 5;
context.stroke();
context.closePath();

实例：绘制七巧板

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>七巧板</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <style>
        #canvas{
            margin: auto;
        }
    </style>
    <script>
        // 定义数据
        var data = [
            {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
            {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67beef"},
            {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
            {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
            {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
            {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#6a5acd"},
            {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
        ];
        
		// 绘制
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            canvas.width = 800;
            canvas.height = 800;

            for(var i = 0;i < data.length;i++){
                draw(data[i], context);
            }
        };
        
        // 绘制函数
        function draw(data,context){
            context.beginPath();
            context.moveTo(data.p[0].x, data.p[0].y);
            for(var i = 1;i < data.p.length;i++){
                context.lineTo(data.p[i].x, data.p[i].y);
            }
            context.lineTo(data.p[0].x, data.p[0].y)
            context.closePath();
            context.fillStyle = data.color;
            context.fill();
        }
    </script>
</body>
</html>