HTML5 Canvas 繪圖入門
HTML5 Canvas 繪圖入門，僅供學習參考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 移動Web開發指南</title>
<style type="text/css">
h1, h5
{
text-align: center;
}
canvas
{
float: left;
margin: 10px;
overflow: hidden;
}
</style>
<script type="text/javascript" language="javascript">
window.onload = function () {
drawCanvas(0, 0, "canvase_01", "red", 200, 200);
drawCanvas(0, 0, "canvase_02", "green", 200, 100);
drawCanvas(0, 0, "canvase_05", "blank", 300, 60);
drawCanvas(75, 60, "canvase_05", "gray", 150, 90);
drawCanvas(0, 0, "canvase_06", "blank", 300, 50);
drawCanvas(0, 50, "canvase_06", "red", 300, 50);
drawCanvas(0, 100, "canvase_06", "#F8CB1C", 300, 50);
drawCanvas(0, 0, "canvase_07", "green", 100, 150);
drawCanvas(100, 0, "canvase_07", "white", 100, 150);
drawCanvas(200, 0, "canvase_07", "red", 100, 150);
drawRound("canvase_03", "blue", 75, true);
drawRound("canvase_04", "yellow", 75, false);
drawRound("canvase_08", "red", 75, true);
drawRound("canvase_08", "yellow", 75, false);
};
/*
* Canvas 畫非圓圖形測試
* x: 圖形的X軸開始坐标
* y: 圖形的Y軸開始坐标
* id： 元素id
* bgColor: 填充的背景顔色
* width: 寬
* height: 高
*/
function drawCanvas(x, y, id, bgColor, width, height) {
var canvas = document.getElementById(id);
if (canvas != null && canvas != undefined) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = bgColor;
//第一個和第二個參數，代表開始坐标
//第三個參數是圖形的寬
//第四個參數是圖形的高
ctx.fillRect(Number(x), Number(y), Number(width), Number(height));
}
}
/*
* Canvas 畫圓測試
* id： 元素id
* bgColor: 填充的背景顔色
* R： 圓半徑
* IsRound: 是否為正圓(true正圓、false 半圓)
*/
function drawRound(id, bgColor, R, IsRound) {
var canvas = document.getElementById(id);
if (canvas != null && canvas != undefined) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = bgColor;
ctx.beginPath();
var round = Math.PI;
if (Boolean(IsRound))
round = Math.PI * 2;
//第一個和第二個參數，代表圓心坐标
//第三個參數是圓的半徑
//第四個參數代表圓周起始位置(0 起始位置。沿順時針路線，分别是0.5 (正下方)，1 PI和1.5 PI(正上方)，為畫餅圖提供了扇形範圍的依據)
//第五個參數是弧長(Math.PI*1 半圓、Math.PI*2就是整個圓)
ctx.arc(150, 75, Number(R), 0, round, true);
ctx.closePath();
ctx.fill();
}
}
</script>
</head>
<body>
<header>
<section>
<h1>
HTML5 移動Web開發指南</h1>
</section>
</header>
<fieldset>
<legend>HTML5 新元素--Canvas繪圖元素</legend>
<article>
<section>
<canvas id="canvase_01">
您的浏覽器不支援Canvas元素！
</canvas>
<canvas id="canvase_02">
您的浏覽器不支援Canvas元素！
</canvas>
<canvas id="canvase_03">
您的浏覽器不支援Canvas元素！
</canvas>
<canvas id="canvase_04">
您的浏覽器不支援Canvas元素！
</canvas>
<canvas id="canvase_05">
您的浏覽器不支援Canvas元素！
</canvas>
<canvas id="canvase_06">
您的浏覽器不支援Canvas元素！
</canvas>
<canvas id="canvase_07">
您的浏覽器不支援Canvas元素！
</canvas>
<canvas id="canvase_08">
您的浏覽器不支援Canvas元素！
</canvas>
</section>
</article>
</fieldset>
<footer>
<section>
<h5>
<span style="font-family: Arial, Helvetica, sans-serif;">HTML5 新元素--Canvas繪圖元素</span>
</h5>
</section>
</footer>
</body>
</html>
效果圖：
![圖形資料庫Neo4j[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)