這篇文章主要介紹了24個canvas基礎知識小結,非常全面詳盡,推薦給大家。
現把canvas的知識點總結如下,以便隨時查閱。
1、填充矩形fillRect(x,y,width,height); 2、繪製矩形邊框strokeRect(x,y,width,height); 3、擦除矩形clearRect(x,y,width,height); 4、填充樣式fillStyle=red; 樣式可以為顏色、漸變和圖像。 5、描邊樣式strokeStyle=red; 6、描邊線條的寬度lineWidth=4; 7、線條末端形狀lineCap=butt; butt(對接)/round(圓)/square(方),默認情況下是butt; 8、線條相交樣式lineJoin=miter; miter(尖角)/round(圓角)/bevel(斜角),默認尖角; 9、開始繪製路徑beginPath(); 10、結束路徑closePath(); 創建路徑後,如果想繪製一條連接到路徑起點的線條,可以調用closePath(); 11、繪製圓弧arc(x,y,radius,startAngle,endAngle,true/false); 12、繪製弧線arcTo(x1,y1,x2,y2,radius) 從上一點開始繪製一天弧線,到x2,y2為止,並且以給定的半徑radius穿過x1,y1; 13、moveTO(x,y);將繪圖游標移動到(x,y),不畫線14、lineTo(x,y);從上一點開始繪製一條直線15、二次貝塞爾曲線: quadraticCurveTo(cx,cy,x,y); 從上一點開始繪製二次曲線,到x,y為止,cx,cy作為控制點。 16、三次貝塞爾曲線: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 從上一點開始繪製二次曲線,到x,y為止,cx1,cy1和cx2,cy2作為控制點。 17、rect(x,y,width,height);從點x,y開始繪製矩形,寬度和高度分別由width和height指定。這個方法繪製的是矩形路徑,而不是獨立形狀。 18、繪製文本:(1) 填充文本:fillText(hello,x,y,width);width為可選的最大像素寬度,如果文本大於最大寬度,則文本會收縮以適應最大寬度。
(2) 文本描邊:strokeText(hello,x,y,width);width為可選的最大像素寬度。
(3) 文本樣式:font=bold 14px Arial;
(4) 水平文本對齊:textAlign='start';// start, end, left,right, center。默認值:start。以文字的起始點(x,y)為基點的縱軸進行對齊。
(5) 垂直文本對齊:textBaseline='alphabetic';//top, hanging, middle,alphabetic, ideographic, bottom。默認值:alphabetic。以文字的起始點(x,y)為基點的橫軸進行對齊。
(6) 文本的寬度:var text=hello; var length=context.measureText(text);參數text為所需要繪製的文字
19、變換
(1) rotate(angle):圍繞原點旋轉圖像angle弧度。
也可以使用transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0);
(2) scale(x,y):縮放圖像。也可以使用transform(x,0,0,y,0,0);
(3) translate(x,y):將坐標原點移動到x,y,執行這個變換之後,坐標0,0會變成之前由x,y表示的點。也可以使用transform(1,0,0,1,x,y);
(4) transform(<number>, <number>, <number>,<number>,x, y);
(5) setTransform(<number>, <number>, <number>,<number>,x, y);將變換矩陣重置為默認狀態,然後再調用transform();
20、圖形組合複製代碼