html5筆記3 canvas繪畫矩形 圓

canvas是html5中新增加的乙個元素，專門用來繪製圖形。

src="canvas.js">

script>引入canvas.js檔案
onload="draw('canvas');">
id="canvas"
width="500"
height="350">
canvas>
body>

先引入canvas.js指令碼檔案。

然後指定id，建立乙個寬500px，高350px。

再在body屬性裡使用onload="draw('canvas');"函式進行圖形繪畫。

html**:

onload="draw('canvas');">

id="canvas"
width="500"
height="350">
canvas>
body>

function

draw
(id)

var canvas = document.getelementbyid(『canvas』); 是獲取canvas的id；

var context = canvas.getcontext(『2d』); 是取得上下文，並設定為2d;

context.fillstyle = 「#000」; 表示畫布填充顏色是黑色；

context.strokestyle = 「#fff」 ; 表示矩形邊框顏色是白色；

context.linewidth = 5; 表示畫筆粗細是5px

context.fillrect(0,0,500,350); 表示填充顏色從 x軸0，y軸0，填充的寬度是500，高度是350；

context.strokerect(50,50,180,120); 表示矩形x軸50，y軸50，矩形的寬度是180，高度是180；

context.strokerect(100,100,180,120); 表示矩形x軸100，y軸100，矩形的寬度是180，高度是180；

即兩個矩形重疊一部分。

context.fillrect(x,y,width,hight); //x,y分別表示橫向座標起點，縱向座標起點;width,hight分別表示填充的寬和高

context.strokerect(x,y,width,hight); //x,y分別表示橫向座標起點，縱向座標起點;width,hight分別表示矩形的寬和高

onload="draw('canvas');">

id="canvas"
width="500"
height="350">
canvas>
body>

function

draw
(id)
解析：context.arc(x,y,radius,starangle,endangle,anticlockwise);
x:橫向起點座標
y:縱向起點座標
radius:圓半徑
starangle：開始角度   
endangle:結束角度  math.pi*2代表360度
anticlockwise: 是否按照順時針方向繪製

js:

function

draw
(id)
}

html不變

js:

function

draw
(id)
}

function

draw
(id)
}

3 學習html5筆記

audio html5 標籤和video類似，沒有poster width height屬性 details詳情概要標籤 progress標籤進度 marquee 標籤 不在w3c標準 沒有語義，只是樣式，廢棄的標籤 有語義新增標籤 修改樣式使用css優於標籤屬性設定，方便改變需求，減少屬性的記憶。...

5 學習html5筆記

background red url i.png no repeat center 0 background attachment 當元素大小小於背靜，只顯示一部分，應用精靈圖 邊框 border border width 2px 3px 4px 1px border style border to...

HTML5筆記 （常用元素）

根元素，允許省略 允許省略 標題引入樣式定義 段落換行 水平線換行與不換行的節加粗斜體強調小 上標下標 a scheme 一般是http host 在http中預設為www a slef,blank,top,parent 代表用本視窗，新視窗，頂級框架，父級框架開啟 a media 指定href才有...