在前端的工作過程中，我們需要用到圖片的時候，是怎樣的操作呢？
其實，很簡單。切吧。沒有什么圖片是一次切圖搞不定的，如果有，那就切兩次！
哈哈，好吧。其實，還是有很多種方法讓我們能夠得到圖片的。現在介紹下一種神奇的方法吧，它能夠讓你通過代碼寫出畫面！想想是不是很有逼格！來吧，讓我帶你裝逼帶你飛！
首先，你要知道，它是什么？
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 來畫矩形：（前面同上）
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 寫出來的哈！
