例:<canvas width=500 height=500 id="canvas">
您的瀏覽器不支持canvas
</canvas>
畫布:默認(rèn)的就是300*150的大小;
canvas畫布有一個坐標(biāo)軸,坐標(biāo)周的原點就是0 0 點,就是左上角的點
X軸水平方向 Y周就是垂直方向,
設(shè)置canvas的寬和高直接在標(biāo)簽上寫,不用寫style.
所有的操作都是在js腳本里面書寫;
第一步,獲取畫布
var canvas=document.querySelector("#canvas");
第二步,獲取繪制環(huán)境,getContext("2d") 獲取canvas繪制環(huán)境,參數(shù)必須傳入且為2d
var ctx = canvas.getContext("2d");
lineWidth 設(shè)置線寬,
strokestyle 設(shè)置描邊樣式,HSL
lineJoin 設(shè)置線段交匯的樣式,接收bevel(斜角) round(圓角) miter(尖角 默認(rèn)值)
lineCap 設(shè)置線帽 只在端點處有效 butt無 默認(rèn)的 square 方帽 round 圓帽
/* --------------------加括號的是方法,不加括號的是屬性--------------------*/
closePath( ) 閉合路徑,將當(dāng)前正在繪制的路徑閉合 ;
fill( ) 填充,
linewidth strokeStyle lineCap fillStyle 4個屬性
moveTo() lineTo() fill() stroke(); 4個方法
在新圖形前面寫上beginPath();表示開始一條新路徑的繪制,
寫上beginPath();后面的圖形繪制的樣式等不會對前面的圖形產(chǎn)生影響.
fillRect (x,y,w,h) 填充矩形
clearRect(x,y,w,h) 擦除 指定區(qū)域
rect(x,y,w,h) 定義矩形路徑
ctx.clearRect(0,0,canvas.width,canvas.height); 清除畫布,完全清除
ctx.arc(原點橫坐標(biāo) , 原點縱坐標(biāo) , 半徑 , )
arc(cx,cy,radius,startAngle,endAngle[,是否逆時針]);
cx,cy圓心坐標(biāo) radius半徑 startAngle開始endstartAngle 結(jié)束弧度
角度轉(zhuǎn)弧度公式: PI/180*角度=弧度
填充樣式 ctx.fillStyle = "red";改變填充顏色
text
fillText(str,x,y) 填充文字
strokeText(str,x,y) 描邊文字
font 文字屬性 設(shè)置文字樣式
textAligin 設(shè)置文字水平對齊方式
textBaseline 設(shè)置文字垂直對齊方式
