canvas介紹
1.什麼是canvas（畫布）
-----canvas是HTML5新增的元素，可用於通過使用JavaScript中得到腳本來繪製圖形
-----canvas看起來和<img>元素很像，唯一不同的就是他並沒有src和alt屬性。實際上，<canvas>標籤只有兩個屬性：width和height
-----<canvas>元素只是創造課一個固定大小的畫布，要想在它上面繪製內容，我們需要找到他的渲染上下文，<canvas>元素有一個叫做getContext（）的方法，這個方法是用來獲得渲染上下文和它的繪畫功能
-----canvas圖像的渲染有別於HTML的渲染，canvas得到渲染極快，不會出現代碼覆蓋後延遲渲染的問題，寫canvas代碼時，一定要要具有同步思想
注意：千萬不要在css樣式中指定畫布的寬高
<script type="text/javascript">
window.onload = function (){
var testNode = document.querySelector("#test")
//判斷是否有畫筆
if(testNode.getContext){
var ctx = testNode.getContext("2d") ;
}
}
</script>
繪製矩形
HTML中的元素canvas只支持一種原生的圖形繪製：矩形。所有其他的都圖形的繪製都至少生成一條路徑
<script type="text/javascript">
window.onload = function (){
var testNode = document.querySelector("#test")
if(testNode.getContext){
var ctx = testNode.getContext("2d") ;
}
//同步思維有別於瀏覽器本身的渲染機制
//設置圖形的填充顏色
ctx.fillStyle = "deeppink"
//設置圖形輪廓的顏色
ctx.strokeStyle = "pink"
//設置當前繪線的粗細。屬性值必須爲正數
ctx.lineWidth = 50
// 設定線條與線條間接合處的樣式（默認miter）
//可選值: round 圓角 bevel 斜角 miter 直角
ctx.lineJoin = "bevel"
//繪製一個填充的矩形 fillRect() 不加單位
ctx.fillRect(0,0,100,100) //表示從0，0點 畫一個100*100的矩形
//帶邊框的矩形
ctx.strokeRect(100,100,100,100) //這個邊框是兩個像素
// ctx.strokeRect(100.5,100.5,100,100) //邊框一個像素
//清除指定矩形區域，讓清除部分完全透明
ctx.clearRect(100,100,100,100)
//通過路徑畫矩形
ctx.rect(150,100,50,50)
ctx.fill()
}
</script>
canvas繪製路徑
-----圖形的基本元素是路徑，路徑是通過不同顏色和寬度的線段或者曲線相連形成的不同形狀的點的集合
canvas基本模板
1.路徑容器
-----每次調用路徑api時，都會往路徑容器裏做登記
-----調用beginPath時，清空整個路徑容器
2.樣式容器
-----每次調用樣式api時，都會往樣式容器裏做登記
-----調用save時，將樣式容器裏的狀態壓入樣式棧
-----調用restor時，將樣式棧裏的棧頂狀態彈出容器裏，進行覆蓋
3.樣式棧
注意：save（）和restore必須成對出現，在寫樣式設置之前必須寫beginPath()來清除之前的路徑
ctx.save();
//寫關於樣式的設置
ctx.beginPath()
//寫關於路徑
ctx.restore()
closePath（）、moveTo（）、lineTo（）、fill（）、stroke（）
-----moveTo（x,y）:將筆觸移動到指定的座標
-----lineTo（x，y）：繪製一條當前位置到指定位置的直線
-----closePath（）：自動閉合路線
-----fill（）：通過填充路徑的內容區生成的實現得到的圖形，該方法會自動閉合路徑
-----stroke（）：通過線條來繪製圖形輪廓，該方法不會自動閉合路徑
掌握以上方法即可做一個小練習（簽名效果）
參考鏈接：https://blog.csdn.net/qq_44313091/article/details/102763885
圓、二次貝塞爾曲線、三次貝塞爾曲線
圓
-----arc（x，y，r，startAngle，endAngle，anticclockwise）：畫一個以（x，y）爲圓心的以r爲半徑的圓弧，從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認爲順時針）來生成。
-----arcTo（x1，y1，x2，y2）：根據給定的控制點和半徑畫一段圓弧，再以直線連接兩個控制點。
二次貝塞爾曲線
-----quadraticCurveTo（cp1x，cp1y，x，y）：cp1x，cp1y爲一個控制點，x,y爲結束點
三次貝塞爾曲線
-----bezierCurveTo（cp1x，cp1y，cp2x，cp2y，x，y）：cp1x，cp1y爲控制點一，cp2x，cp2y爲控制點二，x，y爲結束點
變換
-----translate：用來移動canvas的原點帶一個不同的位置，在canvas中translate是累加的
-----rotate：這個方法只接受一個參數，旋轉的角度，它是順時針方向的，以弧度爲單位得到值，旋轉的中心點始終是canvas的原點，如果要改變它，需要用translate方法，在canvas中retate是累加的
-----scale：對畫布進行縮放
放大：放大css像素的面積，使畫布內css像素的個數變少，單個css像素所佔據的實際物理尺寸變大
縮小：縮小css像素的面積，使畫布內css像素的個數變多，單個css像素所佔據的實際物理尺寸變小
可以通過canvas的變換做一個小練習
參考鏈接：https://blog.csdn.net/qq_44313091/article/details/102765432
掌握以上知識可以做一個時鐘的鏈接，參考鏈接：https://blog.csdn.net/qq_44313091/article/details/102763981
引入圖片
在canvas中插入圖片，必須要等圖片加載完才能操作
-----drawImage（img，0，0，img.width,img.height）:在0，0的位置插入圖片img，寬高爲圖片的本身寬高
var img =new Image();
img.src ="../img/1.jpg"
img.onload = function(){
draw();
}
function draw (){
ctx.drawImage(img,0,0,img.width,img.height)
}
使用背景
-----createPattern：在指定的方向內重複指定的元素
var img =new Image();
img.src ="../img/1.jpg"
img.onload = function(){
draw();
}
function draw (){
var pattern = ctx.createPattern(img,"repeat");
ctx.fillStyle= pattern
ctx.fillRect(0,0,1000,1000)
}
漸變
線性漸變
-----createLinearGradient（x1，y1，x2，y2）：在x1，y1到x2，y2之間創建漸變對象
-----addColorStop(stop，color) ：規定 gradient 對象中的顏色和位置，stop介於0.0-1.0之間的值，表示漸變中開始於結束之間的位置，color表示在結束位置顯示的css顏色值
var gradient = ctx.createLinearGradient(0,0,300,300)
gradient.addColorStop(0,"red")
gradient.addColorStop(0.5,"yellow")
gradient.addColorStop(1,"green")
ctx.fillStyle= gradient
ctx.fillRect(0,0,300,300)
徑向漸變
-----createLinearGradient(x1,y1,r1,x2,y2,r2)：創建放射狀/圓形漸變對象，x1，y1，r1漸變的開始圓的座標及半徑，x2，y2，r2漸變的結束圓的座標及半徑
var gradient = ctx.createRadialGradient(150,150,50,150,150,100)
gradient.addColorStop(0,"red")
gradient.addColorStop(0.5,"yellow")
gradient.addColorStop(1,"green")
ctx.fillStyle= gradient
ctx.fillRect(0,0,300,300)
繪製文本
-----fillText（）：在畫布上繪製“被填充的文本”
-----strokeText（）：在畫布上繪製文本（無填充）
-----measureText（）：返回包含指定文本寬度的對象
-----font：設置或返回文本內容的當前字體屬性
-----textAlign：設置或返回文本內容的當前對齊方式
-----textBaseline：設置或返回在繪製文本時使用的當前文本基線
像素操作
ImageData對象：該對象中儲存着canvas對象真是的像素數據，它包含一下幾個只讀屬性
-----width：圖片寬度，單位是像素
-----height：圖片高度，單位是像素
-----data：數組，每一個像素點的rgba信息
將畫布上的內容變成半透明
var image = ctx.getImageData(0,0,100,100)
for(var i=0; i<image.data.length;i++){
image.data[4*i+3] = 50
}
ctx.putImageData(image,0,0)
-----createImageData：創建一個ImageData對象
-----putImageData：將像素數據寫入畫布
//默認創建出來的rgba(0,0,0,0)
var image = ctx.createImageData(100,100)
for(var i=0;i<image.data.length;i++){
image.data[4*i+3] = 255
}
//將像素數據寫入畫布
ctx.putImageData(image,0,0)