1. canvas自身是帶的有width 和height的，寫在標(biāo)簽屬性style里面和外面是不一樣的
2. 在進(jìn)行canvas路徑操作的時(shí)候阳柔，一定要先清除前面的路徑（obj.beginPath()）抡医，否則前面的路徑會(huì)受到后面的影響凳枝。
3. obj.beginPath()和obj.closePath()兩個(gè)沒有關(guān)系，obj.beginPath()清除之前的路徑杉武；obj.closePath()閉合當(dāng)前路徑
4. canvas畫線操作：moveTo()忠寻、lineTo()烙博、beginPath()鸥昏、closePath()塞俱、stroke()、fill()
5. canvas畫矩形操作：rect()吏垮、strokeRect()障涯、fillRect()、clearRect()
6. canvas 做自適應(yīng)可以用window.onresize
7. canvas 的描邊擴(kuò)展的時(shí)候既向內(nèi)又向外擴(kuò)展
8. canvas不會(huì)保存圖形膳汪，所以圖形畫了就不能修改唯蝶，如果要修改，只能刪了重畫遗嗽；canvas畫的圖形沒有事件粘我，canvas對(duì)象本身有事件
canvas里的圖形向右移動(dòng)實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: gray;
text-align: center;
}
</style>
<script>
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let left=100;
let gd = c1.getContext('2d');
requestAnimationFrame(next);
function next(){
gd.clearRect(0,0,c1.width,c1.height);
left+=5;
gd.strokeRect(left,100,200,200);
requestAnimationFrame(next);
}
}
</script>
</head>
<body>
<canvas width="800" height="600" style="background:white;"></canvas>
</body>
</html>
這段代碼是在canvas里有一個(gè)不斷向右移動(dòng)的矩形。
requestAnimationFrame函數(shù)是請(qǐng)求一個(gè)動(dòng)畫幀
canvas里鼠標(biāo)移入移出矩形變色實(shí)例：
還是上面的canvas痹换，js代碼如下
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
gd.strokeRect(100,100,200,200);
c1.onmousemove=function(ev){
let l=100,r=l+200,t=100,b=t+200;
let x=ev.offsetX,y=ev.offsetY;
//let x=ev.clientX-c1.offsetLeft,y=ev.clientY-c1.offsetTop;
//這里的鼠標(biāo)坐標(biāo)x征字，y可以有兩種寫法
gd.clearRect(0,0,c1.width,c1.height);
if(x>=l&&x<=r&&y>=t&&y<=b){
gd.strokeStyle='red';
}else{
gd.strokeStyle='black';
}
gd.strokeRect(100,100,200,200);
}
}
9. canvas畫圓操作arc(cx,cy,r,startAng,endAng,false),cx、cy表示圓心坐標(biāo)晴音，r表示半徑，startAng缔杉、endAng表示起始角度和結(jié)束角度（弧度制）锤躁，最后一個(gè)參數(shù)false表示是否逆時(shí)針。
canvas里鼠標(biāo)移入移出圓形變色實(shí)例：
原理：如何判斷鼠標(biāo)是否在圓內(nèi)或详？只要判斷鼠標(biāo)到圓心的距離是否大于半徑系羞，就可以檢測(cè)是否在圓內(nèi)
還是上面的canvas，js代碼如下
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let cx=200,cy=200,r=150;
function d2a(n){//角度轉(zhuǎn)弧度
return n*Math.PI/180;
}
function a2d(n){//弧度轉(zhuǎn)角度
return n*180/Math.PI;
}
gd.arc(cx,cy,r,d2a(0),d2a(360),false);
gd.stroke();
c1.onmousemove=function(ev){
let x=ev.offsetX,y=ev.offsetY;//鼠標(biāo)到畫布的距離霸琴，左上
let dis=Math.sqrt(Math.pow(x-cx,2)+Math.pow(y-cy,2));//鼠標(biāo)到圓心的距離
gd.clearRect(0,0,c1.width,c1.height);
if(dis<=r){//如果鼠標(biāo)到圓心的距離小于半徑椒振，說明在圓內(nèi)
gd.strokeStyle='red';
}
else{//否則在圓外
gd.strokeStyle='black';
}
gd.beginPath();
gd.arc(cx,cy,r,d2a(0),d2a(360),false);
gd.stroke();
}
}