了解认识Canvas

canvas 是一个容器，其中的图像需要我们使用脚本（javaScript）来绘制；

我们可以在canvas上绘制 线条 矩形 圆形 文本等等，还可以添加图片  

如果在css装饰元素属性 不能全部看到，canvas 当浏览器窗口宽高发生改变的时候 需要重新设置canvas的宽高 。

canvas 的应用：

绘制文本：canvas支持文本的绘制，同时可以增加色彩和动画；

绘制图像：canvas支持回值各种图和表；

动画：canvas支持动画效果；

交互：canvas能够对javaScript 的事件进行响应，例如用户的点击 鼠标移动  触控设备上的手指移动等；

游戏：canvas 支持动画和交互，所以它能够用于游戏的特效。

2.绘图步骤

找到canvas 元素      

<canvas id="myCanvas"></canvas>>

var canvas = document.querySelector("#myCanvas");

创建一个用于绘制的对象（绘制上下文） 将canvas转化为2d模型 getContext

var content = canvas.getContext("2d");

描述要绘制的图形  绘制矩形 fillRect  fillStyle 填充样式  fill 填充

content.fillStyle="red";
content.fillRect(0,0,200,100);
content.fill()

函数fillRect()在canvas上绘制一个矩形 * content.fillRect(0,0,200,100); 前面两个左上角偏移量，后面两个值代表宽高。

绘制圆     false 顺时针 true逆时针

content.fillStyle="red";

content.arc(200,200,100,0,Math.PI,false); 

content.fill();

绘制线条  五角星

//lineWidth属性设置或返回当前线条的宽度
//lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条 参数 x,y  路径的目标位置的 x //坐标和y坐标
//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
content.strokeStyle="green";
       content.fillStyle="red";
       content.lineWidth=20;
       content.moveTo(100,100);
       content.lineTo(300,100);
       content.lineTo(120,250);
       content.lineTo(200,0);
       content.lineTo(270,250);
       content.lineTo(100,100);
       content.lineTo(300,100);
       content.stroke();
       content.fill();

圆形渐变

//beginPath() 方法开始一条路径，或重置当前的路径。 
//createLinearGradient() 方法创建放射状/圆形渐变对象      
//closePath() 方法创建从当前点到开始点的路径
content.beginPath();
       var rad = content.createRadialGradient(200,200,0,200,200,100);
       
       addColorStop  两个参数第一个是0.1-1指颜色的过渡范围  第二个是颜色   最大值是1  
       rad.addColorStop(0.2, "green");
       rad.addColorStop(0.4, "blue");
       rad.addColorStop(0.6, "orange");
       rad.addColorStop(0.8, "red");
       rad.addColorStop(1, "blue");
       content.fillStyle = rad;
       content.arc(200, 200, 100, 0, Math.PI * 2, true);
       content.fill();
       content.closePath();

绘制图片

//drawImage() 方法在画布上绘制图像、画布或视频。

//drawImage() 方法也能够绘制图像的某些部分，以及或者增加或减少图像的尺寸。
var img=new Image();
       img.src="./img/1.jpg";
       content.drawImage(img,30,30,100,100,200,100,200,100)

清除画布

//clearRect() 方法清空给定矩形内的指定像素
ontent.fillStyle="red";
       content.fillRect(0,0,200,200);
       content.fill();
//矩形内清空下
       content.clearRect(50,50,100,100)