1. 程式人生 > >H5 canvas標籤 與 js 結合畫圖

H5 canvas標籤 與 js 結合畫圖

Internet Explorer 8 以及更早的版本不支援 元素。
1.畫弧函式context.arc(x,y,r,sAngle,eAngle,counterclockwise);引數描述x圓的中心的 x 座標。y圓的中心的 y 坐

標。r圓的半徑。sAngle起始角,以弧度計。(弧的圓形的三點鐘位置是 0 度)。eAngle結束角,以弧度計。

counterclockwise可選。規定應該逆時針還是順時針繪圖。False = 順時針,true = 逆時針。

2畫線lineTo() 方法新增一個新點,然後建立從該點到畫布中最後指定點的線條(該方法並不會建立線條)。

context.lineTo(x,y);x為目標位置的橫座標,y為目標位置的縱座標,因此,lineTo()方法建立的是一個目標點,

而不是一條線。若要畫出具體的線需要首先起始點座標,再用context.stroke()連線兩點;

例   var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");ctx.beginPath();ctx.moveTo(20,20);ctx.lineTo(20,100);ctx.lineTo(70,100);ctx.stroke();

3 繪製二次貝塞爾曲線context.quadraticCurveTo(cpx,cpy,x,y);

開始點:moveTo(20,20)
控制點:quadraticCurveTo(20,100,200,20)
結束點:quadraticCurveTo(20,100,200,20)

4確定點是否在所畫路徑中

isPointInPath()方法如果指定的點位於當前路徑中,則返回 true,否則返回 false

5.矩形繪製context.rect(x,y,width,height);x矩形左上角的 x 座標y矩形左上角的 y 座標width矩形的寬度,以畫素

計height矩形的高度,以畫素計