H5canvas(绘制矩形，绘制圆形，绘制线段，绘制文字，绘制曲线)

Canvas简介

canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 canvas 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。

什么是canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

就是相当于在页面上放置一个canvas元素，就相当于在页面上放置了一块画布，可以在其中进行图形的描绘。
canvas元素只是一块无色透明的区域，需要利用JS编写在其中进行绘画的脚本。

创建Canvas元素

 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度：

<!-- canvas表示画布的意思(在画布中可以化你任意想化的画) -->
<canvas id="myCanvas" width="500" height="600"></canvas>

<style>
    *{
        margin:0;
        padding:0;
    }
    canvas{
        display: block;
        margin: 50px auto;
        border: 2px  blue solid;
    }
    /*
        canvas标签默认就有高度和宽度的样式
        canvas标签可以支持所有的CSS样式
    */
</style>

canvas标签默认是行元素(display:inline)

那为什么一个display:inline行元素他可以支持宽高呢 ？？

因为canvas是一个替换元素他就可以支持宽高(什么是可替换元素)

通过JavaScript来绘制canvas

在H5中canvas标签向JS提供了许多API接口，来让我们通过JS来绘制canvas标签中的一些画面等。。。

基础知识

1. var canvas = document.getElementById('canvas'); 获取画布

2. var cxt = canvas.getContext('2d'); 获取2d画笔(最常用)

3. canvas.getContext('webgl'); 获取3d画笔但是兼容性不是很好(不常用)一般是做不出来的

首先我们要获取画布和画笔 然后就可以在canvas上面画任何的图形了

//获取画布
var canvas = document.getElementById('myCanvas');
//获取画笔
//画布.getContext('2d') 就可以获取到画笔了 当前这个画笔是2d画笔
var cxt = canvas.getContext('2d');//2d画笔最常用

我们们在绘制任何图形的时候一般用用两种方式来绘制图形

一种是stroke方式来绘制空心的图形，另一种是fill方式来绘制实心的图形

而我们绘制矩形的时候跟着两种方式有所不同(绘制矩形也可以用stroke和fill方式来绘制)，也可以说canvas提供了更快捷的方式来绘制矩形

//获取画布
var canvas = document.getElementById('myCanvas');
//获取画笔
var cxt = canvas.getContext('2d');//2d画笔最常用

//首先你要定义绘制图形什么图形的轨迹
//在决定用stroke和fill方式来绘制图形

//定义绘制矩形的轨迹
cxt.rect(0,0,200,200);
//绘制矩形
cxt.stroke();

绘制任何图形都能用到的两种方式

1. cxt.stroke()绘制空心图形

2. cxt.fill()绘制实心图形

首先你要定义绘制图形的轨迹在来选择用stroke和fill方式来绘制图形

绘制矩形

基础知识

绘制矩形有两种方式

第一种方式

先用rect方法定义一个矩形的轨迹，在用stroke或者是fill方法绘制圆形

1. cxt.rect(x,y,w,h) 定义矩形的轨迹

2. cxt.stroke()绘制空心矩形

3. cxt.fill()绘制实心矩形

//获取画布
var canvas = document.getElementById('myCanvas');
//获取画笔
var cxt = canvas.getContext('2d');//2d画笔最常用
//定义绘制矩形的轨迹
cxt.rect(0,0,200,200);
//绘制矩形
//cxt.stroke();//绘制空心矩形
cxt.fill();//绘制实心矩形

绘制矩形的轨迹：rect接收的参数

cxt.rect(10,20,100,150);
//cxt.rect(距离画布左上角的距离,距离画布右上角的距离,绘制图形的宽度,绘制图形的高度)

点前cxt.rect表示你要在距离画布水平方向10像素竖直方向20像素这个点开始绘制矩形，绘制长方形的大小是宽度为100高度为150的一个矩形

 cxt.rect(10,20,100,150)这个函数是用来绘制一个在x,y这个点开始绘制指定宽度和高度的矩形(绘制一个轨迹)

第二种方式

canvas提供了两种方式直接绘制矩形不用先用rect绘制轨迹在用stroke和fill绘制矩形了

1. cxt.fillRect(x,y,w,h); 绘制实心的矩形

2. cxt.strokeRect(x,y,w,h); 绘制空心的矩形

绘制一个实心的矩形

//获取画布
var canvas = document.getElementById('myCanvas');
//获取画笔
var cxt = canvas.getContext('2d');//2d画笔最常用
//绘制实心的矩形
cxt.fillRect(10,20,100,150);

 file表示(填充) Rect表示(矩形) 通过画笔用fillRect绘制一个充满的实心的矩形

绘制实心矩形：fillRect接收的参数

//绘制实心矩形
cxt.fillRect(10,20,100,150);
// cxt.fillRect(距离画笔左上角的距离,距离画布右上角的距离,绘制图形的宽度,绘制图形的高度)

 绘制一个空心的矩形

//获取画布
var canvas = document.getElementById('myCanvas');
//获取画笔
var cxt = canvas.getContext('2d');//2d画笔最常用
//绘制空心矩形
cxt.strokeRect(10,20,100,150);

 表示stroke(空心) Rect(矩形)通过画笔用strokeRect绘制一个空心的矩形

绘制空心矩形：strokeRect接收的参数

//绘制空心矩形
cxt.strokeRect(10,20,100,150);
// cxt.strokeRect(距离画笔左上角的距离,距离画布右上角的距离,绘制图形的宽度,绘制图形的高度)

 绘制圆形

基础知识

在数学中一π等于180度，两π等于360度,也就是一个圆周，而在js中数学对象中的Math.PI来表示π

1. cxt.arc(x,y,r,圆的起始角度,圆的终止角度,true) false 为默认值表示顺时针绘制圆，true表示逆时针绘制圆绘制圆形轨迹

通过cxt.arc方法来绘制圆的轨迹然后在通过stroke或者是fill来绘制是空心的还是实心的圆

arc绘制圆形的轨迹接收的参数：cxt.arc(圆心距离画布的水平距离,圆心距离画布的竖直距离,表示圆的半径,绘制圆的起点,绘制圆的终点,表示顺时针绘制还是逆时针绘制)默认值是false  false表示顺时针绘制圆 true表示逆时针绘制圆

绘制实心的圆形

//获取画布
var canvas = document.getElementById('myCanvas');
//获取画笔
var cxt = canvas.getContext('2d');//2d画笔最常用
//绘制圆的轨迹
cxt.arc(200,200,200,0,Math.PI*2,false);
//绘制实心的圆
cxt.fill();
//第一个参数和第二个参数表示圆的圆心
//cxt.arc(圆心距离画布的水平距离, 圆心距离画布的竖直距离, 表示圆的半径, 绘制圆的起点, 绘制圆的终点, 表示顺时针绘制还是逆时针绘制)
//默认值是false  false表示顺时针绘制圆 true表示逆时针绘制圆
//Math.PI(π) = 180°

绘制空心的圆形

//获取画布
var canvas = document.getElementById('myCanvas');
//获取画笔
var cxt = canvas.getContext('2d');//2d画笔最常用
//绘制圆的轨迹
//从250,250位置开始绘制圆 圆的半径是250 在从180度多开始逆时针绘制到360度
cxt.arc(250,250,250,Math.PI,Math.PI*2,true);
//绘制空心的圆
cxt.stroke();

绘制线段

前言

在实际生活当中是两点确定一条直线的，那么在canvas中可以用moveTo来表示绘制线段的起点，用lineTo来表示绘制线段的终点这样就可以确定一条直线了，在选择stroke或者是fill方式绘制线段，其实每次绘制图形的时候都是一个路径其实可以用beginPath来开始绘制路径在用closePath闭合当前路径，这两种方法在画图形的时候必须要写上不然会让路径连上效果不好。

基础知识

1. cxt.moveTo(距离画布水平方向,距离画布竖直方向) 绘制线段的起始点
2. cxt.lineTo(距离画布水平方向,距离画布竖直方向)  绘制线段的终点

3. cxt.lineWidth = 数值 设置画笔的线宽

4. cxt.strokeStyle = '颜色值'  设置实心画笔的颜色

5. cxt.fillStyle = '颜色值'  设置空心画笔的颜色

开始绘制路径和闭合当前的路径

1. cxt.beginPath()   开始绘制路径 （必须要写   断开和上次路径之前的关系）

2. cxt.closePath()   闭合当前的路径 （ 这两个函数是配套的）

设置两条线段连接处的样式

1. cxt.lineJoin = 'miter'  默认值
2. cxt.lineJoin = 'round' 连接处变成圆角 
3. cxt.lineJoin = 'bevel'  连接处变成斜角

设置一条线段两端的样式

1. cxt.lineCap = 'butt'  默认值
2. cxt.lineCap = 'round'  两端变圆角
3. cxt.lineCap = 'square' 两端增加线宽的一半

square往线的两端追加长度(长度是你当前线宽的一半) 上面添加5 和 下面添加5 = 当前线宽10

绘制一条线段
 

//获取画布
var canvas = document.getElementById('myCanvas');
//获取画笔
var cxt = canvas.getContext('2d');
//绘制开始线段路径  让画笔移动到某个点上(初始点)
cxt.moveTo(20,20);
//绘制结束线段路径 在让画笔移动到终点上面(最终点)
cxt.lineTo(200,200);
//绘制线段
cxt.stroke();

绘制线段：定义线段的轨迹(先有一个初始点在有一个终点，然后就可以得出两个点了(两点之间确定一条直线)

绘制线段的路径：移动画笔到 20 20这个点用cxt.moveTo(20,20) ,  再次移动到 200 200 这个点cxt.lineTo(200,200) , 然后这个两个点已经是一条线段了

绘制线段：cxt.stroke()绘制空心线段  注意一般在绘制线段的时候都用stroke方式绘制线段，不会使用fill方式绘制线段的

设置画笔的样式

我们在用canvas画东西的时候 分为两种绘制的方法(方法和设置画笔的属性都要对应上)

第一种：画笔.stroke绘制实心的东西 

第二种：画笔.fill绘制空心的东西

设置画笔的颜色和设置画笔的宽度都是根据 画笔的种类来进行设置的{ 1.stroke实心 2.fill空心}

设置画笔的线宽

画是画笔画出来的，让画笔的线宽变粗 自然就可以让线条变粗了

var canvas = document.getElementById('myCanvas');
var cxt = canvas.getContext('2d');
//画笔.lineWidth设置画笔的画笔的线条宽度 line(线)
//设置画笔的线宽
cxt.lineWidth = 10;
//绘制开始线段路径
cxt.moveTo(20,20);
//绘制结束线段路径
cxt.lineTo(200,200);
cxt.stroke();

设置画笔的颜色绘制线段 

var canvas = document.getElementById('myCanvas');
var cxt = canvas.getContext('2d');
//设置画笔的线宽
cxt.lineWidth = 10;
//画笔.strokeStyle设置画笔的颜色
//stroke表示空心 设置空心画笔的颜色 fill表实心 设置实心画笔的颜色
cxt.strokeStyle = 'pink'; //设置空心画笔的颜色
// cxt.fillStyle = 'pink' //设置实心画笔的样式
cxt.moveTo(20,20);
cxt.lineTo(200,200);
cxt.stroke();

一般绘制线条都是默认(stroke)空心的，实心线条不会显示出来没有人这样用

用线条绘制一个图形

var canvas = document.getElementById('myCanvas');
var cxt = canvas.getContext('2d');
cxt.strokeStyle = 'pink';
cxt.lineWidth =  10;
//设置两条线段连接处的样式
cxt.lineJoin = 'round';
cxt.beginPath();//表示开始断开路径
cxt.moveTo(20,20);
cxt.lineTo(20,100);
cxt.lineTo(50,80);
cxt.closePath()//闭合当前路径
cxt.stroke();

用cxt.lineJoin = 'round'设置线条的两端样式为圆角，也可以连续用lineTo方法绘制多个线段，在绘制路径之前最好调用beginPath函数断开之前路径 ，cxt.closePath(); 自动把当前这个点把路径给关闭了(闭合当前路径) 这个函数有闭合路径的作用

绘制一个圆

圆也是一个路径 也绘制一个新的路径时调用beginPath来闭合上一次路径

var canvas = document.getElementById('myCanvas');
var cxt = canvas.getContext('2d');
cxt.strokeStyle = 'pink';
cxt.lineWidth = 10;
cxt.beginPath();//绘制一个新的路径时必须调用beginPath函数
//表示开始绘制圆的路径
cxt.arc(150,150,100,0,Math.PI);
cxt.closePath()   //闭合当前的路径(圆也是路径也需要闭合)
cxt.stroke();

绘制文字

前言

在canvas标签内不可以在内部写其他的标签和文字

那我们想让canvas标签内部有文字那该怎么办？？

canvas通过们提供了一个cxt.font这个属性内部可以写字体大小和字体的系列，然后在通过cxt.fillText()或者是cxt.strokeText()选择是绘制空心文字还是实心文字。

基础知识

1. cxt.font = '20px 微软雅黑'  绘制字体的大小和系列

2. cxt.fillText(文字,绘制文字的x位置,绘制文字的y位置)绘制实心文字

3. cxt.strokeText(文字,绘制文字的x位置,绘制文字的y位置)绘制空心文字 （不常用）

设置文字和绘制文字的x水平位置的对齐方式

1. cxt.textAlign = 'center'; 居中对齐 常用 

2. cxt.textAlign = 'left';  左对齐 默认

3. cxt.textAlign = 'right'; 右对齐 

设置文字和绘制文字的y位置的对齐方式

1. cxt.textBaseline = 'bottom'  文字的最低部和绘制文字的y位置对齐

2. cxt.textBaseline = 'middle'   文字的最中间和绘制文字的y位置对齐(常用)

3. cxt.textBaseline = 'top'  文字的最顶间和绘制文字的y位置对齐

4. cxt.textBaseline = 'hanging' 文字的最顶间和绘制文字的y位置对齐(和top效果差不多)

文字的阴影

1.  cxt.shadowOffsetX = 数值   设置文字阴影的水平偏移量

2. cxt.shadowOffsetY = 数值    设置文字阴影的竖直偏移量

3.  cxt.shadowColor = '颜色名/rgb/rgba/十六进制'  设置文字阴影的颜色

4.  cxt.shadowBlur = 数值0-1; 设置文字阴影的模糊程度

5. cxt.measureText(文本)   测量文本的宽度（不常用）

绘制文字带有阴影

var canvas = document.getElementById('myCanvas');
var cxt = canvas.getContext('2d');
//绘制文字的轨迹
cxt.font = '20px 微软雅黑';
//设置文字的x轴水平对齐方式
cxt.textAlign = 'center';
//设置文字的y轴位置对齐方式
cxt.textBaseline = 'middle';
//设置文字的阴影样式
cxt.shadowColor = 'red';
//设置文字阴影的水平偏移量
cxt.shadowOffsetX = 10
//设置文字阴影的竖直偏移量
cxt.shadowOffsetY = 10
//设置文字阴影的模糊程度
cxt.shadowBlur = 0.5;
//绘制文字
cxt.fillText('花生', 250, 30);

绘制曲线(不常用)

前言

两点之间确定一条直线，但是这个直线不一定是直线也有可能是曲线。

基础知识

绘制二次贝塞尔曲线

1. 二次贝塞尔曲线有一个控制点  x0,y0表示 控制点的坐标
2. cxt.quadraticCurveTo(x0,y0,x1,y1) 

3. cxt.quadraticCurveTo(控制点的x,控制点的y,曲线终点的x,曲线终点的y)

绘制三次贝塞尔曲线

1. 三次贝塞尔曲线有两个控制点   x0,y0    x1,y1 分别表示两个控制点的坐标
2. cxt.quadraticCurveTo(x0,y0,x1,y1,x2,y2)
3. cxt.quadraticCurveTo(第一个控制点的x,第一个控制点的y,第二个控制点的x,第二个控制点的y,曲线终点的x,曲线终点的y);

绘制二次贝塞尔曲线

绘制二次贝塞尔曲线(只有一个控制点叫做二次贝塞尔曲线)

绘制二次贝塞尔曲线你要有 moveTo()绘制曲线起点  cxt.quadraticCurveTo(控制点,终点)绘制曲线的终点 这些条件才能绘制曲线

var canvas = document.getElementById('myCanvas');
var cxt = canvas.getContext('2d');
cxt.beginPath();
//绘制曲线的起点
cxt.moveTo(20, 20);
//绘制曲线的终点
cxt.quadraticCurveTo(40, 40, 100, 200);
cxt.stroke();

绘制三次贝塞尔曲线

绘制三次贝塞尔曲线(有两个控制点叫做三次贝塞尔曲线)

绘制三次贝塞尔曲线 moveTo()绘制曲线起点  cxt.quadraticCurveTo(控制点1,控制点2,终点)绘制曲线终点 这些条件才能绘制曲线

var canvas = document.getElementById('myCanvas');
var cxt = canvas.getContext('2d');
cxt.beginPath();
//绘制曲线的起点
cxt.moveTo(20, 20);
//获取曲线的终点
cxt.quadraticCurveTo(100, 20, 300, 200, 400, 400);
cxt.stroke();