iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
0

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>svg</title>
</head>
<body>
	<svg width="640" height="480" style="border:1px solid #000">
		<line x1="50" y1="50" x2="350" y2="350" stroke="red" stroke-width="2" ></line>
		<circle cx="200" cy="50" r="50" fill="#ffcc00"></circle>
		<rect x="150" y="100" width="100" height="100" fill="blue"></rect>
	</svg>
</body>
</html>

今天畫SVG,相對於canvas覺得比較少的程式碼就可以畫出一些基本
<svg width="640" height="480" style="border:1px solid #000"></svg> 這是畫布範圍,寫在<body>標籤內。

  1. <line x1="50" y1="50" x2="350" y2="350" stroke="red" stroke-width="2" ></line> 這是建立一條線段,兩的點座標連接就是一條線段。x1="50" y1="50"這是第一個點座標;x2="350" y2="350"這是第二個點座標,連接起來就是一條線
  2. <circle cx="200" cy="50" r="50" fill="#ffcc00"></circle> 建立一個圓形,cx="200" cy="50" 給個座標,這代表圓心座標,r="50" r代表半徑,然後填滿黃色。
  3. <rect x="150" y="100" width="100" height="100" fill="blue"></rect> 建立方形,x="150" y="100" 再次給個座標,加上寬高,再填滿~

上一篇
25% Canvas 繪圖
下一篇
27% canvas 和 svg
系列文
前端初心者的30%經驗值30

尚未有邦友留言

立即登入留言