想写出炫酷的画面吗？看看Canvas 吧！

在前端的工作过程中，我们需要用到图片的时候，是怎样的操作呢？

其实，很简单。切吧。没有什么图片是一次切图搞不定的，如果有，那就切两次！

哈哈，好吧。其实，还是有很多种方法让我们能够得到图片的。现在介绍下一种神奇的方法吧，它能够让你通过代码写出画面！想想是不是很有逼格！来吧，让我带你装逼带你飞！

炫酷的宇宙

首先，你要知道，它是什么？

Canvas 

Canvas API（画布）是H5新增的标签，用于在网页实时生成图像。并且可以操作图像内容，基本上也就是通过JS来操作的一种位图。

这里插播一条：位图与矢量图的区别。

矢量图：根据几何特性，通过线段和曲线描述图像

        1、矢量图形与分辨率无关(放大后不失真)

        2、色彩不丰富

        3、文件后缀(.ai  .eps  svg  .dwg  .dxf  .cdr)

        4、占用空间，相对较小

位图：通过像素的一格一格的小点来描述图像（也就可以称作点阵图像）

        1、位图与分辨率有关(放大后失真)

        2、色彩丰富

        3、文件后缀(.bmp  .gif  .jpg  .tif  .psd)

        4、占用空间，相对较大

程序员的色彩

而我们通过Canvas 所写出来的图片都是位图！！！

好了，现在来开始学习Canvas 的基本知识点吧。

首先，通过Canvas 来画线：

在 Body 内 有一个 <canvas id="myCanvas" width="600px" height="400px"></canvas>的封闭标签。通过设置该标签的JS 便可以实现画线的功能了。

var myCanvas = document.getElementById("myCanvas");

var ctx = myCanvas.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(300,300);

ctx.lineTo(600,0);

ctx.lineWidth = 10;                 // 设置线的宽度

ctx.strokeStyle = "yellow";         // 设置线的颜色

ctx.stroke();

Canvas 的布局

通过Canvas 来画矩形：（前面同上）

ctx.rect(100,100,200,300);            // 设置矩形的起始点和长宽

ctx.lineWidth = 10;                   // 设置宽

ctx.strokeStyle = "#0000FF"    // 设置颜色

ctx.stroke();

补充》》ctx.fillRect(200,200,150,150);         //  画实心矩形的方法  ctx.fillRect

通过Canvas 来写文本：

ctx.font = "50px 隶书";

ctx.fillText("奥特曼打小怪兽",100,200);                // 后面两个参数设置位置

ctx.strokeText("你在谁的身边看",50,100);

就是这样的效果

最后来看看放射性渐变

var gradient = ctx.createRadialGradient(300,200,10,300,200,200);          //前三个参数，表示小圆心，小半径  后三个参数，表示 大圆心， 大半径

gradient.addColorStop(0,"white");

gradient.addColorStop(0.5,"red");

gradient.addColorStop(0.7,"green");

gradient.addColorStop(1,"yellow");

ctx.fillStyle = gradient;

ctx.arc(300,200,200,0,Math.PI*2);

ctx.fill();

上面效果如图

当然，这些就是基础技能啦！如果你的技能进阶的话，就会有神奇的事情发生哦。比如小面的效果图，也都是Canvas 写出来的哈！

混乱时代 蹦跳的世界 你知道吗？