canvas入門-2路徑、文字

標籤：style   blog   http   java   color   使用   

1、canvas是一個二維網格座標系

2、canvas路徑

<script type="text/javascript">
//繪製矩形var oCanvas = document.getElementById(‘canvas-1‘);var context = oCanvas.getContext(‘2d‘);//指向2d渲染環境的引用context.moveTo(0,0);context.lineTo(0,100);context.lineTo(100,100);context.lineTo(100,0);context.lineTo(0,0);context.stroke();
//用路徑的方式繪製一個正方形，注意最後一定要stroke()
//兩個主要的方法 moveTo(x,y) lineTo(x,y)
</script>

　　

<script type="text/javascript">
//繪製圓形var oCanvas = document.getElementById(‘canvas-1‘);var context = oCanvas.getContext(‘2d‘);//指向2d渲染環境的引用context.arc(200,200,20,0,2*Math.PI)context.fillStyle = "#FF0000";context.stroke();//描邊
　　　　　　　　　 context.fill();//填充</script>
arc()的使用方法：

	context.arc(x,y,r,sAngle,eAngle,counterclockwise); 參數 描述 x 圓的中心的 x 座標。 y 圓的中心的 y 座標。 r 圓的半徑。 sAngle 起始角，以弧度計（弧的圓形的三點鐘位置是 0 度）。 eAngle 結束角，以弧度計。 counterclockwise 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。

　　3、canvas文本

<script type="text/javascript">
//漸層字，此處看圖可區分stroke與fill的區別var oCanvas = document.getElementById(‘canvas-1‘);var context = oCanvas.getContext(‘2d‘);//指向2d渲染環境的引用context.font = "30px Arial";var gradient=context.createLinearGradient(0,0,100,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");context.fillStyle = gradient;//context.fillText(‘學習 canvas‘,50,50);context.strokeText(‘學習 canvas‘,50,50)</script>

　　

 

 

context.fillText(text,x,y,maxWidth);方法的使用

text	規定在畫布上輸出的文本。
x	開始繪製文本的 x 座標位置（相對於畫布）。
y	開始繪製文本的 y 座標位置（相對於畫布）。
maxWidth	可選。允許的最大文本寬度，以像素計。

但是有個問題是？為什麼x,y設為0,0 時，渲染不出來文字？