HTML5之Canvas繪圖——使用Canvas繪製圖形的基本教程
HTML5火的正熱，最近有個想法也是要用到HTML的相關功能，所以也要好好學習一把。
好好看了一下Canvas的功能，感覺HTML5在客戶端交互的功能性越來越強了，今天看了一下Canvas繪圖，下邊是幾個實例，記下以備後用。
Canvas繪製一個加載的動畫圖片
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas製作圓形進度條Loading效果 | jQuery特效|手機微信網站特效| 網頁特效庫</title>
<style>
/*框架預覽 CSS*/
* { margin: 0; padding: 0; }
body { text-align: center; background-color: #ccc; }
.mkeHeadBox{ padding: 30px 10px; text-overflow: ellipsis; white-space: nowrap; margin: 0; color: #fff; text-align: center; overflow: hidden; letter-spacing: 1px; font: 26px/26px "微軟雅黑"; }
.mkeFooterBox{ padding: 25px 10px; text-overflow: ellipsis; margin: 0; color: #fff; font-size: 14px; line-height: 24px; text-align: center; overflow: hidden;}
.mkeContentBox:after{height:0; clear:both;}
.mkeFooterBox p,.mkeFooterBox div{padding:0; margin:0; line-height:26px; font-size:14px;}
.mkeFooterBox a{color:#fff; white-space:nowrap}
.mkeButton{background:#F36; display:inline-block; text-decoration:none; width:102px; border-radius:0.3em; transition:all 0.3s ease}
.mkeButton:hover{ background: #FF1550; }
.mkeURL{font-size:24px;}
.mkeFooterBox .mKeBannerAD{ width: 728px; height: 90px; margin: 18px auto 0; }
.mkeFooterBox .mSmallKeBannerAD{display:none;}
/*@media only screen and (max-width:900px){
.mkeButton {display:block; margin:8px auto 0;}
}
@media only screen and (max-width:767px){
.mkeHeadBox{font-size:18px; padding:15px 10px;}
.mkeFooterBox p,.mkeFooterBox div{ line-height:24px; font-size:12px;}
.mkeURL{font-size:22px;}
.mkeFooterBox .mKeBannerAD{display:none;}
.mkeFooterBox .mSmallKeBannerAD{width:300px; height:250px; margin:18px auto 0; display:block;}
}*/
/*End*/
</style>
</head>
<body class="mkeBody">
<div class="mkeHeadBox">Canvas製作圓形進度條Loading效果</div>
<div class="mkeContentBox">
<!--效果html開始-->
<canvas id="canvas" width="300" height="300" style="background:#FF1550;"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas'), //獲取canvas元素
context = canvas.getContext('2d'), //獲取畫圖環境，指明爲2d
centerX = canvas.width/2, //Canvas中心點x軸座標
centerY = canvas.height/2, //Canvas中心點y軸座標
rad = Math.PI*2/100, //將360度分成100份，那麼每一份就是rad度
speed = 0.1; //加載的快慢就靠它了
//繪製藍色外圈
function blueCircle(n){
context.save();
context.strokeStyle = "#fff"; //設置描邊樣式
context.lineWidth = 5; //設置線寬
context.beginPath(); //路徑開始
context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用於繪製圓弧context.arc(x座標，y座標，半徑，起始角度，終止角度，順時針/逆時針)
context.stroke(); //繪製
context.closePath(); //路徑結束
context.restore();
}
//繪製白色外圈
function whiteCircle(){
context.save();
context.beginPath();
context.strokeStyle = "white";
context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
}
//百分比文字繪製
function text(n){
context.save(); //save和restore可以保證樣式屬性只運用於該段canvas元素
context.strokeStyle = "#fff"; //設置描邊樣式
context.font = "40px Arial"; //設置字體大小和字體
//繪製字體，並且指定位置
context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
context.stroke(); //執行繪製
context.restore();
}
//動畫循環
(function drawFrame(){
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if(speed > 100) speed = 0;
speed += 0.1;
}());
}
</script>
<!--效果html結束-->
</div>
<div class="mkeFooterBox">
<p>此效果從由【科e整理/原創特效】。
</div>
</body>
</html>
1、使用Canvas繪製直線：
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(20,30);//第一個起點
cans.lineTo(120,90);//第二個點
cans.lineTo(220,60);//第三個點（以第二個點爲起點）
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body οnlοad="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
這裏用到的兩個API方法，moveTo和lineTo分別是線段的起點和終點座標，變量爲（X座標,Y座標）,strokeStyle、stroke分別路徑繪製樣式和繪製路徑。
2、繪製漸變線條
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(0,0);
cans.lineTo(400,300);
var gnt1 = cans.createLinearGradient(0,0,400,300);//線性漸變的起止座標
gnt1.addColorStop(0,'red');//創建漸變的開始顏色，0表示偏移量，個人理解爲直線上的相對位置，最大爲1，一個漸變中可以寫任意個漸變顏色
gnt1.addColorStop(1,'yellow');
cans.lineWidth=3;
cans.strokeStyle = gnt1;
cans.stroke();
}
</script>
<body οnlοad="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
3、填充一個圓形
圓形的用途很廣，當然也包含了橢圓。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,true);
cans.closePath();
cans.fillStyle = 'green';//本來這裏最初使用的是red，截圖一看，傻眼了，怕上街被愛國者打啊，其實你懂的~~
cans.fill();
}
</script>
<body οnlοad="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
4、圓形區塊
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body οnlοad="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
來源：http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html
感謝分享