convas 使用

<!--不能用css樣式去定義canvas的寬度和高度，否則畫圖會出錯！--> <canvas id="test" width="500" height="500">如果能看到這行文字，則你的瀏覽器不支持canvas標簽</canvas>

1) 繪制矩形

<script type="text/javascript"> window.onload=function(){var drawTest=document.getElementById("test");var context=drawTest.getContext("2d");//fill--->填充, stroke--->描邊; style---->樣式; context.fillStyle="#f60";context.fillRect(50,50,100,100);//x,y,w,hcontext.strokeStyle="#900";context.lineWidth=10;//邊框粗細context.strokeRect(100,100,100,100)//x,y,w,hcontext.clearRect(50,40,40,70)//以矩形橡皮擦樣式擦出指定畫布區域 } </script>

?2）繪制圓形

<script type="text/javascript"> window.onload=function(){var drawTest=document.getElementById("test");var context=drawTest.getContext("2d");//開始創建路徑; context.beginPath();//創建圖形的路徑;context.arc(x,y,radius,startAngle,endAngle,anticlockwise);//x,y為圓心坐標，radius為圓半徑，startAngle開始角度，endAngle結束角度，anticlockwise是否順時針方向，//注意：順時針為fasle，逆時針為true//套用公式: 1° = π / 180 ;//例如：要個270°，則270 * π / 180context.closePath();//#路徑創建完成后，關閉路徑。context.fillStyle="#000";//#設定繪制樣式，調用繪制方法，繪制路徑。 context.fill();} </script>

?

?如果不關閉路徑，已經創建的路徑會永遠保留著，就算用fill方法和stroke方法在頁面上將圖形意境繪制完畢，路徑都不會消失。

3）繪制直線

moveTo(x,y):將光標移動到指定坐標點，繪制直線的時候以這個坐標點為起點。lineTo(x,y):在moveTo方法中制定的直線起點與參考中的指定的直線終點之間繪制一條直線。即兩點確立一條直線！ <script type="text/javascript"> window.onload=function(){var drawTest=document.getElementById("test");var context=drawTest.getContext("2d");context.moveTo(50,50);context.lineTo(200,300);context.strokeStyle="#f00";context.lineWidth=5;context.stroke(); } </script>

?未完，待續……

轉載于:https://www.cnblogs.com/w3develop/archive/2013/04/27/3047207.html

總結

以上是生活随笔為你收集整理的HTML5学习笔记三的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。