圓弧context.arc(x, y, radius, start,end, boolean)
x:圓心的x坐標(biāo)
y:圓心的y坐標(biāo)
radius:半徑
start:開始角度
end:結(jié)束角度
boolean:是否逆時(shí)針（true）為逆時(shí)針，(false)為順時(shí)針
寫個(gè)小例子 圓形加載效果
function d2a(n){ return n*Math.PI/180; }//由于arc方法使用的是弧度制 所以封裝一個(gè)小方法 把角度轉(zhuǎn)換為弧度 window.onload= function () { var oC=document.querySelector('#c1'); var context=oC.getContext('2d'); var x=200; var y=200; var r=100; var d=0; var timer=null; timer=setInterval(function () { context.lineWidth=200; context.clearRect(0,0,oC.width,oC.height); context.beginPath(); context.strokeStyle='red'; context.arc(x,y,r,d2a(0),d2a(d++),false); context.stroke(); if(d>360){ clearInterval(timer); } },16) }
效果如下：從0度到360的漸變 過(guò)程中和完成后的兩種形態(tài)
Paste_Image.png
Paste_Image.png
繪制文字以及其中的一些方法
填充文字：context.fillText(text,x,y)繪制文字輪廓 context.strokeText(text,x,y)
text:要繪制的文字
x:文字起點(diǎn)的x坐標(biāo)軸
y:文字起點(diǎn)的y坐標(biāo)軸
context.font:設(shè)置字體樣式
context.textAlign:水平對(duì)齊方式
start、end艳悔、right、center
context.textBaseline:垂直對(duì)齊方式
top师痕、hanging、middle、alphabetic、ideographic毫胜、bottom
context.measureText(text).width:計(jì)算字體長(zhǎng)度(px) 注意 沒(méi)有計(jì)算高度height方法
依然要寫個(gè)小例子 代碼如下：
var oC = document.querySelector('#c1');var context = oC.getContext('2d');context.fillStyle = 'red';context.textAlign = 'center'; //水平方向居中context.textBaseline = 'middle'; //垂直方向居中context.font = '50px 微軟雅黑'; //字體大小為50px 字體為微軟雅黑var text='你好书斜，我是于曉魚'; //想要呈現(xiàn)的內(nèi)容context.fillText(text,oC.width/2,oC.height/2); //填充文字 注意text內(nèi)容要寫在第一個(gè)位置alert(context.measureText(text).width);//計(jì)算字體的長(zhǎng)度為400px
translate、scale酵使、rotate方法
1荐吉、平移context.translate(x,y)
x:坐標(biāo)原點(diǎn)向x軸方向平移xy:坐標(biāo)原點(diǎn)向y軸方向平移y
2、縮放context.scale(x,y)
x:x坐標(biāo)軸按x比例縮放y:y坐標(biāo)軸按y比例縮放
3口渔、旋轉(zhuǎn)context.rotate(angle)
angle:坐標(biāo)軸旋轉(zhuǎn)x角度（角度變化模型和畫圓的模型一樣）
小例子~
var oC = document.querySelector('#c1'); var context = oC.getContext('2d'); context.save(); //保存了當(dāng)前context的狀態(tài) context.beginPath(); context.rotate(d2a(10)); context.strokeRect(100,100,200,100); context.restore();//恢復(fù)到剛剛保存的狀態(tài),保存恢復(fù)只能使用一次 context.save(); context.beginPath(); context.scale(0.5, 0.5);//縮放 context.rotate(d2a(10));//旋轉(zhuǎn) context.translate(300, 100);//平移 context.strokeRect(400,100,200,100); context.restore(); //實(shí)驗(yàn)表明應(yīng)該移動(dòng)的是坐標(biāo)軸 //實(shí)驗(yàn)表明縮放的是坐標(biāo)軸比例 //實(shí)驗(yàn)表明旋轉(zhuǎn)的是坐標(biāo)軸 //注意平移 縮放 旋轉(zhuǎn) 這些參數(shù)都是兩個(gè) 缺一不可
保存和恢復(fù)狀態(tài)
保存：context.save() 調(diào)用該方法样屠，會(huì)保存當(dāng)前context的狀態(tài)、屬性恢復(fù)：context.restore() 調(diào)用該方法就能恢復(fù)到save時(shí)候context的狀態(tài)缺脉、屬性
canvas中特定元素的旋轉(zhuǎn)平移等操作實(shí)際上是對(duì)整個(gè)畫布進(jìn)行了操作痪欲，所以如果不對(duì)canvas進(jìn)行save以及restore，那么每一次繪圖都會(huì)在上一次的基礎(chǔ)上進(jìn)行操作攻礼，最后導(dǎo)致錯(cuò)位业踢。錯(cuò)誤效果：
Paste_Image.png
正確效果：
Paste_Image.png
