Canvas基础知识

一、概述

Canvas是HTML5中非常重要的一个更新亮点，画布，替代Flash的！制作动画、制作游戏。渲染效率非常的高，浏览器不需要安装任何的插件就可以渲染这个动画。而Flash需要安装Flash Player这个插件才行。（Adobe已经宣布从2020开始停止Flash更新）。

1.介绍

canvas是一个标签，有一个默认的宽度，不需要了解。此时注意，如果我们要设置宽度、高度，必须设置在HTML标签上面，而不能设置在CSS上。

我们必须使用JavaScript来控制Canvas渲染各种东西：

    <style>
        canvas {
            border:1px solid #999;
        }
    </style>


    <canvas>
        您的浏览器不支持canvas，请升级您的浏览器或更换谷歌浏览器
    </canvas>

  <script>
        //使用DOM方法获取canvas元素
        let Canvas = document.querySelector('canvas');
        //使用画布的上下文,获取绘画功能对象,就像拿到一直画笔,这支画笔只在当前画笔有效
        var ctx = Canvas.getContext("2d");
        //画各种东西，用ctx方法
        ctx.fillRect(100,100,300,200);
    </script>

注意点:  canvas本身布具有绘画功能, 只是一个画布, 但是H5提供给js的API具有绘画功能

IE9一下不兼容    也可以说所有H5的东西IE9一下均不兼容

2.相关API

2.1 getContext()

get表示得到，context是上下文的意思。获取上下文

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

// 获取上下文对象() 参数是2d绘图
var ctx = canvas.getContext('2d');

2.2 rect()绘制矩形

绘制矩形 rect(x,y,w,h)

x,y 绘制点起始的坐标

w.绘制矩形的宽度

h 绘制矩形的高度

ctx.rect(100,100,200,50);

 在这个情况下我们还不能得到一个矩形，必须使用stroke（） 笔触才行。

       //使用DOM方法获取canvas元素
        let Canvas = document.querySelector('canvas');
        //使用画布的上下文,获取绘画功能对象,就像拿到一直画笔,这支画笔只在当前画笔有效
        let ctx =Canvas.getContext("2d");

        ctx.rect(100,100,200,50);
        ctx.stroke();

 2.3 stroke()笔触

用来绘制线条

ctx.stroke()

2.3 arc()绘制圆形

绘制圆形 arc(x , y , r , sAngle , eAngle，counterclockwise)

                                                   参数值描述

参数值	意义
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

    绘制基本圆形：

        ctx.arc(200,200,50,0, Math.PI*2, true)
        ctx.stroke();

2.4 fill() 填充

        //有填充
        ctx.beginPath()
        ctx.arc(200,200,50,0, Math.PI*2, true)
        ctx.fill()
        ctx.stroke();
        //无填充
        ctx.beginPath()
        ctx.arc(80,80,50,0, Math.PI*2, true)
        ctx.stroke();

2.5 合在一起写API

1. strokeRect(x,y,w,h)

2. fillRect(x,y,w,h)

 注意:没有strokeArc 和 fillArc 的写法yua

2.6 clearRect() 清除

原来绘制的矩形对现在的矩形有所影响，则使用clearRect绘制的矩形会将远来绘制的矩形清除。

        ctx.fillRect(100,100,300,200)；
        ctx.clearRect(150,150,80,30);

二、笔触和填充

Canvas中能够产生颜色的是两个东西，一个叫做笔触（也叫做描边），一个叫做填充。

1. 笔触stroke()

1.1 笔触的使用

笔触的作用简单来说就是两个字 ——描边

ctx.strokeRect(100,100,300,40);

在这种情况下绘制的矩形我们会发现它只有描边，而没有填充，我们之前使用的fillRect()是具有以安重根效果的。

1.2 设置笔触的颜色

        ctx.strokeStyle = "purple";
        ctx.strokeRect(0,0,100,40);

1.3 设置笔触的宽度

        ctx.lineWidth = 4;
        ctx.strokeRect(10,10,100,40);

1.4 使用笔触绘制线段

        ctx.strokeStyle = "purple";
        ctx.lineWidth = 4;
        ctx.moveTo(50,50); //将画笔移动至画布上画线段的初始位置
        ctx.lineTo(50,200); //告诉下一个点的位置在哪 
        ctx.stroke(); //开始画线

1.5 闭合路径

使用closePath()来闭合路径

就是浏览器会自动的在开始点moveTo的点和最后一个lineTo的结束点之间绘制一条线 .

        ctx.moveTo(50,50); //将画笔移动至画布上画线段的初始位置
        ctx.lineTo(50,200); //告诉下一个点的位置在哪 
        ctx.lineTo(80,100);
        ctx.lineTo(180,90);
        ctx.closePath();
        ctx.stroke(); //开始画线

1.6 绘制新线条

以使用beginPath() 表示开始一个新的路径

ctx.beginPath()
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.stroke()

ctx.beginPath()
ctx.lineTo(300, 200);
ctx.lineTo(400, 300);
ctx.stroke()

2.填充 fill()

可以用fill给闭合区域填充颜色.

        ctx.beginPath();	  
        ctx.moveTo(100, 100); 
        ctx.lineTo(300, 300); 
        ctx.lineTo(300, 200);
        ctx.lineTo(430, 180);
        ctx.closePath();        // 闭合路径
        ctx.stroke();	        // 正式开始划线 
        ctx.fill();				// 绘制填充色