一,navas 畫布標籤
  <canvas width="600" height="400" id="mycanvas" ></canvas>

二,畫圖基本步驟
(一),首先建立畫布，新增到頁面(必要)
(二),獲取canvas 進行設定(必要)
    var c = document.getElementById('mycanvas');
    var ctx = c.getContext('2d');

(三),確定填充的圖形
1,畫線(矩形,五角型,三角形等一切線行)
ctx.moveTo(0,0)// 起始座標
ctx.lineTo(100,100)//終止座標

2,畫圓
x,y, 起始位置（圓心位置） r（
 
40）半徑 0（開始角度），2*Math.PI 結束角度 true 逆時針  false順時針
ctx.beginPath();
ctx.arc(100,100,40,0,2*Math.PI,true) //畫圓
ctx.stroke();//畫線

3,面型顏色,線性顏色
畫線的顏色
ctx.strokeStyle = 'red'
填充圖形的顏色
ctx.fillStyle = 'pink'

ctx.fill();//畫圖
ctx.stroke();//畫線

三,兩種漸變色
1,圓形漸變色
createRadialGradient(x1,y1,r1,x2,y2,r2) x1,y1,x2,y2,代表的是圓的開始座標和結束座標 r代表的是半徑
 
var grd = ctx.createRadialGradient(100,100,5,150,60,100)
    grd.addColorStop('0','red');
    grd.addColorStop('1','green');
    ctx.fillStyle = grd;
    ctx.fill()

2,矩形漸變
起點位置(0,0)  終止位置(200,0)
var grd = ctx.createLinearGradient(0,0,200,0)
        grd.addColorStop('0','red');
        grd.addColorStop('1','green');
        ctx.fillStyle 
 
= grd; 
     ctx.fillRect(100,50,100,50);

四,畫布寫入文字
// fillText('內容'，x,y) x,y代表的座標
    ctx.font = '40px Arial';
    ctx.fillText('hellow',100,100)

五,畫布常見問題
1,漸變色屬性會汙染最近的一個原形顏色
解決方法:在之間設定一個無半徑的圓,可完美解決
2,畫布只能設定一個 var ctx = c.getContext('2d');
無法解決
六,拖拽
三個事件一個屬性兩個阻止預設行為
都是div需要阻止預設事件,一個是移上來不能不給移,一個是放進去不能不給放
img則只需要設定可以拖動即可,兩個都需要加上id
三個事件都需要傳入event事件
<div id="div1" ondrop="drop(event)" ondragover="dragover(event)"></div>
 <img src="./images/logo.png" alt="" draggable="true" ondragstart="drag(event)"
  id="img1">

拖拽事件
function drag(event) {
        // dataTransfer 是一個物件，作用就是儲存拖拽過程中的資料  setData(資料型別，要拖拽的物件)
            event.dataTransfer.setData('a',event.target.id)
     }

放下
 function drop(event) { 
        event.preventDefault();
        var data =  event.dataTransfer.getData('a');
        document.getElementById('div1').appendChild(document.getElementById(data));
    }

主要目的是為了能把拖拽的元素放到div中
    function dragover(event) { 
        // 需要阻止div的預設行為
        event.preventDefault();
     }

(我一個字都沒落,實在懶得回憶是咋做的,那就照抄就行 反正用的少)