canvas快速入门2---canvas的面

1.canvas的面

上一章节介绍了如何画线，总共用到了8个API，这一章节我们来画“面”，主要是多边形，矩形，圆形，最后用不同颜色填充这些形状内部。上一章出现的API这里不再解释，不知道的请先看上一章。

1.趁热打铁画个三角形(多边形)

步骤：

• 获取画布上下文。
• 确定三角形的三个点A(10,10), B(100,10), C(55,100).
• 设置线宽2px，颜色红色，绘制。

<canvas id="canvas" height="400" width="400" style="border:1px solid #ccc"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    if(canvas.getContext){

        const van = canvas.getContext('2d');
        van.beginPath();
        van.lineTo(10,10);
        van.lineTo(100,10);
        van.lineTo(55,100);
        van.lineTo(10,10);// 回到起始点图形闭合
        van.lineWidth = 2;
        van.strokeStyle = 'red';
        van.stroke();
        van.closePath();
        
    }else{
        alert('不支持canvas');
    }
</script>

2.画矩形

这是新内容哦，介绍一个新的API，专门画矩形而生的：
rect(x, y, w, h)：表示左上角在坐标(x, y)处，宽为w，高为h的矩形
矩形框的颜色和线宽跟线段一致都是通过strokeStyle和lineWidth进行设置。

<script>
    const canvas = document.getElementById('canvas');
    if(canvas.getContext){
        const van = canvas.getContext('2d');// 获取画布上下文
        van.strokeStyle = 'red';// 设置边框颜色
        van.lineWidth = 2;// 设置线宽
        van.rect(10,10,200,100);// 绘制矩形
        van.stroke();// 绘制
    }else{
        alert('不支持canvas');
    }
</script>

3.画一个圆形(弧)

画圆形或者画弧是同一个API，因为画一个360度的弧就是一个圆。
arc(x, y, r, sDeg, eDeg,)：表示圆心位置在(x, y)处半径为r，起始弧度为sDeg,结束弧度为eDeg的弧。
弧度不是角度，这一点也要注意。Math.PI/180就是每一度对应的弧度。
弧度默认起始位置是3点钟位置而不是12点位置，如图：

• 画一个与安心在(60，60)处，半径50的1/4圆弧，验证一下弧度的起始位置是不是3点钟位置。
• 分别设置顺时针和逆时针方向所画圆弧区别。

<script>
    const canvas = document.getElementById('canvas');
    if(canvas.getContext){
        const van = canvas.getContext('2d');// 获取画布上下文
        van.closePath();
        van.strokeStyle = 'red';// 设置边框颜色
        van.lineWidth = 2;// 设置线宽
        van.arc(60,60,50,0,Math.PI/2,true);// 绘制圆弧，设置逆时针方向
        van.stroke();// 绘制
        van.beginPath();

        van.beginPath();
        van.strokeStyle = 'green';// 设置边框颜色
        van.lineWidth = 2;// 设置线宽
        van.arc(180,60,50,0,Math.PI/2);// 绘制圆弧，默认顺时针方向
        van.stroke();// 绘制

    }else{
        alert('不支持canvas');
    }
</script>

上述代码中的结束弧度Math.PI/2改成2*Math.PI即可画出圆形

4.填充颜色-fill()和fillStyle

本章最后一个知识点，给画出来的图形填充颜色。strokeStyle设置画笔颜色也是设置边框的颜色。对应的fillStyle则是设置填充颜色，stroke()是执行绘制，则fill()是执行填充。
看个例子：

		const van = canvas.getContext('2d');// 获取画布上下文
        van.strokeStyle = 'green';// 设置边框颜色
        van.fillStyle = 'yellow'; // 设置填充颜色
        van.lineWidth = 2;// 设置线宽
        van.arc(180,60,50,0,Math.PI*2);// 绘制圆弧，默认顺时针方向
        van.stroke();// 绘制
        van.fill(); // 填充

综上都是很基础的API，一时还看不出效果，但是再复杂的图形也是由最基础的图形所构成，耐心才有所得。

小结

• rect(x, y, w, h)：表示左上角在坐标(x, y)处，宽为w，高为h的矩形
• arc(x, y, r, sDeg, eDeg,)：表示圆心位置在(x, y)处半径为r，起始弧度为sDeg,结束弧度为eDeg的弧。
• fillStyle[=color]：设置填充颜色。
• fill() : 执行填充
• fillRect(x, y, w, h)：表示左上角在坐标(x, y)处，宽为w，高为h的带有填充的矩形

5个API结合之前的8个API已经可以画出各种颜色的各种图形了，加油。