canvas 画直线从零开始学习canvas,为何运用canvas,运用到什么场景，学习如何绘画统计图，饼图，可以让自己

为什么选择canvas

启因：
    为了实现绚丽多彩的页面，一般使用的是图片。
    当是图片体积大、加载速度慢，使用图片的代价就是降低了页面的性能。

什么是canvas？

 Canvas，又称“画布”，是HTML5的核心技术之一。HTML5中新增了一个Canvas元素，我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。

它可以做那些事？

绘制图形
绘制图表
绘制动画
制作游戏

为啥使用canvas 而不是svg？

HTML5有两个主要的2D图形技术，Canvas是使用JavaScript动态生成的，SVG是使用XML静态描述的。

优缺点：

canvas:

它是位图，放大缩小会失桢，适合像素处理和动态渲染
发生修改，会重汇

svg:

不适合像素处理和适合静态描述
放大缩小不会失桢
发生修改不会重汇

如何使用canvas

简单来说就是使用javascript操作canvas元素绘制图形

第一步：先canvas标签放入body中设置属性id，和宽高。
第二步： js获取canvas元素
第三步：获取上下文环境对象context，使用属性方法绘制图形
第四步：开始绘制图形

简单事例：

绘制一条直线

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
    <script>
        //1、获取canvas对象
        var cnv = document.getElementById("canvas");
        //2、获取上下文环境对象context
        var cxt = cnv.getContext("2d");
        //3、开始绘制图形
        cxt.moveTo(50, 100);
        cxt.lineTo(150, 50);
        cxt.stroke();
        }
    </script>
</body>
</html>

描述canvas

Canvas是一个行内块元素（即inline-block），我们一般需要指定其3个属性：id、width和height。width和height分别用于定义Canvas元素的宽度和高度。

通常我们不要在css选择器定义，会导致不能会获取正确的width和height。

Canvas坐标系

两个概念：
数学坐标系：y轴正方向向上。
W3C坐标系：y轴正方向向下。
canvas使用的是w3c坐标系

基本图形

直线图形
直线距形多边形

直线的绘制
方法：
moveTo()，lineTo()，stroke()
语法
cxt.moveTo(x1, y1);
cxt.lineTo(x2, y2);
cxt.stroke();
说明
cxt表示上下文环境对象context。
(x1,y1)表示直线“起点”的坐标。moveTo(x1,y1)的含义是“将画笔移到点(x1,y1)位置，然后开始绘图”。
(x2,y2)表示直线“终点”的坐标。lineTo(x2,y2)的含义是“使用画笔从起点(x1,y1)开始画直线，一直画到终点(x2,y2)”。
stroke()方法是动笔。
描述：
使用canvas画直线，跟我们平常用笔在纸张上画直线的道理一样，都是先确定直线起点(x1,y1)与终点(x2,y2)，然后再用笔连线，即stroke()。

多条直线的绘画

语法
连续画线：先起点，再确定两个终点
cxt.moveTo(x1, y1);
cxt.lineTo(x2, y2);
cxt.lineTo(x3, y3);
cxt.stroke();
或者
两段直线：通过两个起点，两个终点。
cxt.moveTo(x1, y1);
cxt.lineTo(x2, y2);
cxt.moveTo(x3, y3);
cxt.lineTo(x4, y4);
cxt.stroke();

这样你可以画个三角形，距形，多边形

举例：用直线画一个三角形

<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function $$(id){
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
cxt.moveTo(50, 100);//起点
cxt.lineTo(150, 50); //起点到这是向上的直线
cxt.lineTo(150, 100);//竖线点
cxt.lineTo(50, 100);//横线的点
cxt.stroke();//绘画
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

绘制统计图表的柱状图(距形)

划分：

描边矩形和填充矩形
配合使用moveTo()和lineTo()方法来画一个矩形。但是这种画矩形的方法代码量过多，因此在实际开发中并不推荐使用。对于绘制矩形，Canvas另外为我们提供了独立的方法来实现。在Canvas中，矩形分为两种：描边矩形和填充矩形。

语法
cxt.strokeStyle = 属性值；颜色值、渐变色和图案
cxt.strokeRect(x,y,width,height); 其中(x,y)为矩形左上角点的坐标，width距形的宽，height距形的高

特别注意一点，strokeStyle属性必须在使用strokeRect()方法之前定义，否则strokeStyle属性无效。

填充矩形

语法：
cxt.fillStyle=属性值；
cxt.fillRect(x, y, width, height);
解释:
fillStyle属性跟strokeStyle属性一样，取值也有3种：颜色值、渐变色和图案。
fillRect()方法跟strokeRect()方法一样，用于确定矩形的坐标

rect()方法

语法
rect(x,y,width,height);
说明
x和y为矩形左上角点的坐标，width表示矩形的宽度，height表示矩形的高度

描边距形
ctx.rect(x,y,width,height);
ctx.stroke()
填冲距形
rect(x,y,width,height);
ctx.fill()

<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function $$(id){
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//绘制描边矩形
cxt.strokeStyle = "red";
cxt.rect(50, 50, 80, 80);
cxt.stroke();
//绘制填充矩形
cxt.fillStyle = "#FFE8E8";
cxt.rect(50, 50, 80, 80);
cxt.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

清空矩形

在Canvas中，我们可以使用clearRect()方法来清空“指定矩形区域”。
语法
cxt.clearRect(x, y, width, height);
说明：
在画板中绘画的图形想要清除指定距形区域