canvas圖形操作
//核心代碼
//canvas標簽,寬高必須寫在行內
<canvas id = 'c1' width='800' height='800'></canvas>;
//js代碼
window.onload = function (){
//獲取頁面上的canvas標簽
let oC = document.getElementById('c1');
//獲取圖形上下文接口:包含所需屬性、函數
let gd = oC.getContext('2d');
//路徑操作 選中一個范圍
gd.beginPath();//清除之前開啟的路徑,防止兩次路徑重復渲染
gd.moveTo(470,81);//起點
gd.lineTo(778,236);//連接
gd.lineTo(532,411);//連接
gd.lineTo(312,259);//連接
gd.closePath();//系統自動閉合,無需手動處理閉合路徑,或者使用gd.lineTo(470,81);//手動閉合路徑;
gd.react();//畫矩形,參數x軸距離,y軸距離,寬,高
gd.arc();//畫圓,參數為:圓心x,y,圓半徑,弧度開始,弧度結束,是否逆時針畫圖(true,false)
//react、arc需配合以下函數進行操作
gd.stroke();//對選取進行描邊,默認黑
gd.fill();//對選取進行填充,默認黑
gd.lineWidth=10;//設置邊線寬度為10
gd.strokeStyle='red';//設置邊線的顏色;
gd.fillStyle='red';//設置填充的顏色;
gd.clearRect();//清除一個矩形線框
//react、arc也可以直接使用以下函數
gd.strokeRect();//直接畫一個矩形線框
gd.fillRect();//直接填充一個矩形線框
gd.lineWidth=10;//設置邊線寬度為10
gd.strokeStyle='red';//設置邊線的顏色;
gd.fillStyle='red';//設置填充的顏色;
gd.clearRect();//清除一個矩形線框
}
一切路徑操作開始之前,需要先使用beginPath()用來清除之前開啟的路徑,防止兩 次路徑重復渲染;
//canvas 不保存圖形,不存在事件,渲染速度極快
//畫弧度時需要將角度與弧度進行轉換
function d2a(n){
return n*Math.PI/180;
}
function a2d(n){
return n*180/Math.PI;
}
gd.arc(400,500,d2a(0),d2a(360),false);//畫60度弧度
//canvas處理字體
gd.font='10px 宋體'
gd.strokeText('測試文字',100,100);//描邊,此處指的是文字左下角坐標
gd.fillText('測試文字',100,100);//填充實體,此處指的是文字左下角坐標
//canvas的transform
1.rotate
2.translate
3.scale
需要把gd.ratate()等transform所有操作要寫在畫圖之前;
當transform操作組合使用時,需要倒序寫;
gd.save();//制作動畫時,使用save()函數來保存當前圖像狀態
gd.translate(200,175)//平移
gd.ratate(30*Math.PI/180);//先轉在畫圖
gd.strokeRect(-100,-75,100,100);//圖像是轉動整個canvas左上角,所以將圖像中心放到左上角,然后使用平移移動到想要的位置。
gd.restore();//將之前保存的狀態恢復
擴展
requestAnimationFrame();
逐幀執行,可以代替定時器,比定時器更好用;
實例:
requestAnimationFrame(next);
function next(){
alert('測試');
requestAnimationFrame(next);
}
ev.offsetX,ev.offsetY;
獲取鼠標在當前物體上的坐標點;兼容性canvas的瀏覽器就兼容該屬性