1，canvas 1本身就是h5的一個(gè)標(biāo)簽，該標(biāo)簽用來在html頁面中圈出一塊區(qū)域用來作為畫布繪制圖形,
2，兼容性：
如果瀏覽器不支持canvas標(biāo)簽，則會(huì)把該標(biāo)簽中的文本顯示出來 ie8及之前的瀏覽器不支持
3，在設(shè)置畫布尺寸時(shí)必須使用標(biāo)簽下的width和height屬性，不能用css樣式
<canvas id = 'canvas',width = 500px''height = '500px'>
你的瀏覽器不支持這個(gè)標(biāo)簽
</canvas>
開始繪制啦
//首先要獲取到canvas標(biāo)簽
var canvas = document.querySelector('#canvas')
//創(chuàng)建畫筆
var ctx= canvas.getContext('2d')
//調(diào)用beginPath（）開始繪制
ctx.beginPath();
//設(shè)置繪畫的起始點(diǎn)
ctx.moveTo(100,100)
//設(shè)置繪畫的經(jīng)過點(diǎn)，最后一個(gè)坐標(biāo)就是終點(diǎn)坐標(biāo)
ctx.lineTo(200,200)
ctx.lineTo(300,100);
//用closePath()把起始點(diǎn)和終點(diǎn)連接起來
ctx.closePath()
//調(diào)用繪制方法繪制圖案
ctx.strokeStyle = 'red'//改線框顏色的屬性，在調(diào)用stroke（）前有效
ctx.lineWidth = 10;//修改線框粗細(xì)的屬性
ctx.lineCap='round';//修改線框兩端的樣式
ctx.lineJoin='round';//修改途經(jīng)點(diǎn)的交點(diǎn)樣式
ctx.shadowColor='gray';
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur=5;
ctx.stroke();//用來描邊的
// 在調(diào)用fill（）方法前設(shè)置填充樣式
ctx.fillStyle='red';
ctx.fill();//用來填充的
//繪制矩形
var can=document.querySelector('#canvas');
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(10,10,100,300);
ctx.fillStyle='red';
// x,y,w,h
ctx.fillRect(150,50,100,300);
ctx.fillRect(50,150,300,100);
//繪制弧線
x,y,r,startAngle,endAngle,direction
//貝塞爾曲線
//清理畫布
//定時(shí)器動(dòng)畫
requestAnimationFrame()h5提供的瀏覽器方法，由window調(diào)用，該方法接受一個(gè)函數(shù)作為參數(shù)，通過遞歸或者死循環(huán)讓函數(shù)中的代碼會(huì)被反服執(zhí)行，該方法控制函數(shù)執(zhí)行頻率是顯示器的刷新頻率
function run() {
ctx.clearRect(0,0,500,500);
// 繪制新的一幀
x1+=speedX;
y1+=speedY;
ctx.beginPath();
ctx.arc(x1,y1,50,Math.PI/1800,Math.PI2,false);
ctx.stroke();
window.requestAnimationFrame(run);//控制執(zhí)行時(shí)機(jī)
if (x1>=canvas.width-50) {
speedX=-1;
}
if (y1>=canvas.height-50) {
speedY=-1;
}
}
run();
