在前端的工作过程中，我们需要用到图片的时候，是怎样的操作呢？
其实，很简单。切吧。没有什么图片是一次切图搞不定的，如果有，那就切两次！
哈哈，好吧。其实，还是有很多种方法让我们能够得到图片的。现在介绍下一种神奇的方法吧，它能够让你通过代码写出画面！想想是不是很有逼格！来吧，让我带你装逼带你飞！
炫酷的宇宙
首先，你要知道，它是什么？
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 写出来的哈！
混乱时代
蹦跳的世界
你知道吗？
网友评论