Canvas 畫布
Canvas是一個(gè)矩形區(qū)域的畫布，可以用javascript在上面畫圖，控制每一個(gè)像素；
要記住，canvas標(biāo)簽是使用javascript在網(wǎng)頁(yè)上畫圖，本身不具備畫圖功能
Canvas：主要用于游戲
可視化數(shù)據(jù)、banner廣告
未來(lái)：：可能性：模擬器、遠(yuǎn)程計(jì)算機(jī)控制、圖形編輯器（PS）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="demo" width="600" height="600"></canvas><!--canvas標(biāo)簽的寬高，請(qǐng)?jiān)跇?biāo)簽內(nèi)進(jìn)行設(shè)置，不要用CSS-->
</body>
<script type="text/javascript">
/*第一步，獲取canvas標(biāo)簽*/
var can = document.getElementById("demo");
can.style.border='1px solid red';
can.width=600;
can.height=600;
/*canvas的寬高直接用width和height,千萬(wàn)別can.style.width*/
/*第二步，獲取canvas的上下文（也就是畫布的工具欄）*/
var ctx = can.getContext('2d');
/*第三部：繪制*/
/*畫圖，第一步，定位坐標(biāo)點(diǎn)*/
ctx.moveTo(100,100)//將畫筆移動(dòng)到100，100的坐標(biāo)點(diǎn)
ctx.lineTo(200,100)//將畫筆從100,100水平移動(dòng)到200,100的位置
ctx.lineTo(100,200)//將畫筆從200,100移動(dòng)到100,200的位置
/*閉合路徑*/
ctx.closePath()閉合路徑
//設(shè)置線寬
ctx.lineWidth = 4;
//設(shè)置描邊
ctx.strokeStyle = 'red';//設(shè)置描邊樣式
ctx.stroke()//描邊的意思
//設(shè)置填充
ctx.fillStyle = 'yellow';//設(shè)置填充樣式
ctx.fill();
</script>
</html>
demo canvas畫形狀圓
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="can"></canvas>
</body>
<script type="text/javascript">
(function(){
var can = document.getElementById("can");
var ctx = can.getContext('2d');
can.width = 600;
can.height = 600;
can.style.border = '1px solid red';
var data = [{
'value':0.2,
'color':'red'
},{
'value':0.3,
'color':'yellow'
}
,{
'value':0.4,
'color':'cyan'
}
,{
'value':0.1,
'color':'blue'
}];
var ang = -90;//設(shè)置圓的初始角度
var x0=300,y0=300;
var radius = 200;
for(var i = 0; i < data.length; i++){
ctx.beginPath();//因?yàn)槊總€(gè)扇形屬性都不同，所以每次開辟一個(gè)路徑；
ctx.moveTo(x0,y0);
var angle = data[i].value*360;//定義扇形寬度（角度）
ctx.fillStyle = data[i].color;
/*設(shè)置扇形起點(diǎn)*/
var startAng = ang*Math.PI/180;
/*設(shè)置扇形的重點(diǎn)*/
var endAng = (ang+angle)*Math.PI/180;
ctx.arc(x0,y0,radius,startAng,endAng);
ctx.fill();
//把下個(gè)扇形的起點(diǎn)變成當(dāng)前扇形的終點(diǎn)；
ang+=angle;
}
}());
</script>
</html>
