1.我们前端的绘图技术有哪些：
统计图表：echarts
实时走势图：canvas；
在线画板：魔猴；
HTML5游戏：three.js
2.我这里主要讲的是canvas绘图；
在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。
HTML5
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
3.接下来我们来了解怎么用画布：
首先我们要创建一个画布；,画布是可以设置宽高的，但是我们要记住一点，我们设置宽高要写行内样式，不能写=外部样式，因为在外部样式中我们的单位是px，如果我们把画布的宽和高设置大一点，就会失真，画布就会被拉扯大，我们就会看到1px的小方格网；
4.我们首先要获取画布，这是跟我们获取元素是一样的，然后就是canvas.getContext("2d");获取画布对象上下文，即相当于获取画笔；
画矩形：
画布的原点是我们的左上角（0 ，0）
ele.fillRect(x轴，y轴，宽度，高度)实心矩形 ele.fillStyle= "颜色”；
我们矩形的坐标也是我们的左上角
ele.strokeRect(x轴，y轴，宽度，高度);空心矩形 ele.strokeStyle = “颜色”；
我们的颜色要放到我们在绘制图形的前面写
canvas的路径：
ele.beginPath()；这就相当于告诉我们，绘制要开始了；
我们的路径就相当于点线面的过程
我们的坐标点也是从（0,0）开始的；
起始点：moveTo（0,0）；
转折点：lineTo();这个是终点，也是转折点；这个可以写多个；
ele.stroke（）；
ele.closePath（）结束
这样路径就绘制好了；
画圆：
ele.beginPath()；
ele.arc（x,y,半径，开始的弧度，结束的弧度，顺时针）false/true逆时针；
ele.stroke（）；空心圆；
ele.fill()；实心圆
绘制文字：
font - 定义字体
fillText(文字,x,y) - 在 canvas 上绘制实心的文本
strokeText(文字,x,y) - 在 canvas 上绘制空心的文本
shadowBlur="5"设置阴影模糊度；
shadowColor = “颜色”
shadowoffsetX = 偏移x的距离；
shadowoffsetY= 偏移y的距离；
线性渐变：
// 创建渐变 var grd=ctx.createLinearGradient(0,0,200,0);开始坐标到结束坐标
grd.addColorStop(0,"red");//偏移量和颜色
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
扇形渐变
createRadialGradient（75,50,5,90,60,100）开始坐标和半径，结束坐标和半径
图像：
获取图片：
var ele = new Image();//创建图片容器
ele.src = “图片路径”；
图片直接在画布是显示不出来的；
为了使图片加载出来我们要使用ele.onload = function(){
canvas.drawImage(ele,x,y,w,h)//图片，坐标，宽高
}
ele.createpattern(图片，“repeat”)平铺