convas 使用

<!--不能用css樣式去定義canvas的寬度和高度，否則畫圖會出錯！--> <canvas id="test" width="500" height="500">如果能看到這行文字，則你的瀏覽器不支持canvas標(biāo)簽</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;//邊框粗細(xì)context.strokeRect(100,100,100,100)//x,y,w,hcontext.clearRect(50,40,40,70)//以矩形橡皮擦樣式擦出指定畫布區(qū)域 } </script>

?2）繪制圓形

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

?

?如果不關(guān)閉路徑，已經(jīng)創(chuàng)建的路徑會永遠(yuǎn)保留著，就算用fill方法和stroke方法在頁面上將圖形意境繪制完畢，路徑都不會消失。

3）繪制直線

moveTo(x,y):將光標(biāo)移動到指定坐標(biāo)點(diǎn)，繪制直線的時候以這個坐標(biāo)點(diǎn)為起點(diǎn)。lineTo(x,y):在moveTo方法中制定的直線起點(diǎn)與參考中的指定的直線終點(diǎn)之間繪制一條直線。即兩點(diǎn)確立一條直線！ <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>

?未完，待續(xù)……

轉(zhuǎn)載于:https://www.cnblogs.com/w3develop/archive/2013/04/27/3047207.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。