canvas圖形繪制
- 矩形繪制
rect(x,y,w,h) 沒有獨立路徑
strokeRect(x,y,w,h) 有獨立路徑，不影響別的繪制
fillRect(x,y,w,h) 有獨立路徑，不影響別的繪制
clearRect(x,y,w,h) 需要擦除的矩形區域
- 圓弧繪制
弧度概念
一個圓的弧度等于2π
角度弧度轉化 一角度等于π/180
繪制圓弧：arc(x,y,r,startAngle,endAngle,anticlockwise);
引數：
x 圓心橫坐標
y 圓心縱坐標
r 半徑
startAngle 開始角度
endAngle 結束角度
anticlockwise 是否逆時針方向繪制（默認false表示順時針，true表示逆時針）注意：在使用逆時針時，看需求是否要改變開始和結束的角度
- 繪制文本
ctx.font=“微軟雅黑” 設定字體
strokeText(text,x,y,maxWidth); /描邊文字 fillText(text,x,y,maxWidth);/ 填充文字
引數：
text： 要繪制的文本
x,y ： 文本繪制的坐標（文本左下角）
maxWidth： 設定文本最大寬度，可選引數
ctx.textAngle 文本水平對齊方式，相對繪制坐標來說（引數：left,center,right,start(默認),end）
ctx.direction 屬性css(rtl,ltr)start和end相關
如果是ltr,start和left表現一致（ltr--從left到right）
如果是rtl,start和right表現一致（rtl--從right到left）
ctx.textBaseline 設定基線（垂直對齊方式）
top 文本的基線處于文本的正上方 并且有一段距離
middle 文本的基線處于文本的正中間
bottom 文本的基線處于文本的正下方，并有一段距離
hanging 文本的基線處于文本正上方，并且和文本粘合
alphabetic 默認值，基線處于文本的下方，并且穿過文字
ideographic和bottom相似，但是不一樣//
measureText() 獲取文本寬度obj.width
做影片
- 繪制圖片
drawImage();
三個引數時: drawImage(img,x,y);
- img 圖片物件，canvas物件，video物件
- x,y 圖片繪制的左上角
五個引數時：drawImage(img,x,y,w,h);
- img 圖片物件，canvas物件，video物件
- x,y 圖片繪制的左上角
- w,h 圖片繪制尺寸設定（圖片縮放，不是截取）
九個引數時：drawImage(img,x,y,w,h,x1,y1,w1,h1);
- img 圖片物件，canvas物件，video物件
- x,y 圖片繪制的左上角
- w,h 圖片繪制尺寸設定（圖片縮放，不是截取）
- x1,y1,w1,h1 畫布中的一個矩形區域
- 坐標變換
平移 移影片布的圓點
translate（x.y）; 引數表示移動目標點的坐標
縮放
scale（x,y）; 引數表示寬高的縮放比例
旋轉
rotate（angle); 引數表示旋轉角度
參考檔案：
w3school http://www.w3school.com.cn/tags/html_ref_canvas.asp
Canvas_API https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/241274.html
標籤：HTML5
上一篇：web前端