您好,登錄后才能下訂單哦!
首先,用Jquery訪問到DOM中的canvas元素
var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d");
一 繪制一個矩形
context.fillRect(x,y,width,height);
或者為
context.strokeRect(x,y,width,height);
x,y是繪制起點的橫縱坐標
fillRect繪制的是一個填充顏色的矩形(默認黑色),而strokeRect繪制的是一個帶有邊框,無填充的矩形。
二 繪制線條
context.beginPath(); //開始路徑 context.moveTo(x,y); //起點 context.lineTo(x,y); //終點 context.closePath(); //結束路徑 context.stroke(); //繪制路徑輪廓
三 繪制圓形
context.beginPath(); context.arc(x,y,radius,startAngle,endAngle,anticlockwise); context.closePath(); context.fill();
它的意思是:從與原點距離為一個半徑且角度為開始角度的位置開始,終點落在離原點距離為一個半徑且角度為結束角度的位置上,從而繪出一個扇形。
這里的開始角度和結束角度都是指半徑與X軸之間的夾角,并且采用的是弧度制。
最后一個參數是一個布爾值,true代表為逆時針,false代表順時針繪制。
所以繪制一個圓心坐標為(100,100),半徑為50的圓可以寫為:
context.arc(100,100,50,0,Math.PI*2,false);
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。