1.矩形繪制
1.1繪制方法
fillRect(x,y,width,height) 繪制實心矩形
strokeRect(x,y,width,height) 繪制描邊矩形
rect(x,y,width,height) 創(chuàng)建矩形路徑蜘欲，再使用fill(),stroke()繪制
let canvas=document.getElementById('test')
let context=canvas.getContext('2d')
context.fillRect(10,10,50,50)
context.strokeRect(70,10,50,50)
context.rect(30,30,80,60)
context.stroke()
image.png
使用矩形路徑繪制矩形時统捶，畫筆位置在設(shè)置的矩形原點位置椎例，而直接生成的實心矩形和描邊矩形沒有初始畫筆位置。
context.strokeStyle='#00f'
context.rect(30,30,80,60)
context.lineTo(390,390)
context.stroke()
image.png
1.2設(shè)置樣式
fillStyle() 設(shè)置實心矩形樣式
strokeStyle() 設(shè)置描邊矩形的樣式
let canvas=document.getElementById('test')
let context=canvas.getContext('2d')
context.fillStyle='#f00'
context.fillRect(10,10,50,50)
context.beginPath()
context.strokeStyle='#0f0'
context.strokeRect(70,10,50,50)
context.beginPath()
context.strokeStyle='#00f'
context.rect(30,30,80,60)
context.stroke()
image.png
1.3矩形擦除
clearRect()參數(shù)同上硼讽，類似于橡皮擦的功能蒜田，擦除畫布上的內(nèi)容。
context.clearRect(40,40,100,30)
image.png
但擦除畫布內(nèi)容不會影響之前設(shè)置的樣式信息胜宇，畫筆位置等泳叠。
可以通過重置畫布大小來清除內(nèi)容作瞄，樣式，畫筆位置等析二。
2.繪制多邊形
繪制多邊形的一半方法是畫一條閉環(huán)的折線粉洼，然后使用fill(),stroke()填充描邊。
context.strokeStyle='#00f'
context.fillStyle='#f00'
context.moveTo(30,30)
context.lineTo(80,120)
context.lineTo(200,200)
context.lineTo(150,80)
context.lineTo(30,30)
context.lineWidth=8
context.closePath()//形成閉環(huán)叶摄，否則線條頭和尾有間距
context.fill()//填充
context.stroke()//描邊
image.png
3.曲線繪制
3.1圓與圓弧繪制
繪制方法arc(圓心x，圓心y安拟，半徑r蛤吓，開始角度，結(jié)束角度)
注：角度使用弧度制表示糠赦，順時針取值会傲，負值以逆時針方向取值锅棕。
let canvas=document.getElementById('test')
let context=canvas.getContext('2d')
context.strokeStyle='#00f'
context.lineWidth=5
context.fillStyle='#f00'
context.arc(200,200,80,0,3/2*Math.PI)
context.fill()
context.stroke()
image.png
arcTo()方法，可在兩個線段之間連接一條圓弧
arcTo(起點末端切線x淌山，起點末端y裸燎，終點x，終點y泼疑，圓半徑)
image.png
context.moveTo(10,40)
context.lineTo(40,40)
context.arcTo(80,40,80,80,40)
context.lineTo(80,120)
context.stroke()
arcTo()會移動畫筆的位置德绿，arc()并不會。
