Day06（HTML5 canvas画布 demo 帧动画）
2017-11-07 本文已影响0人
AnnQi
Canvas 画布
Canvas是一个矩形区域的画布，可以用javascript在上面画图，控制每一个像素；
要记住，canvas标签是使用javascript在网页上画图，本身不具备画图功能
Canvas：主要用于游戏
可视化数据、banner广告
未来：：可能性：模拟器、远程计算机控制、图形编辑器（PS）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="demo" width="600" height="600"></canvas><!--canvas标签的宽高，请在标签内进行设置，不要用CSS-->
</body>
<script type="text/javascript">
/*第一步，获取canvas标签*/
var can = document.getElementById("demo");
can.style.border='1px solid red';
can.width=600;
can.height=600;
/*canvas的宽高直接用width和height,千万别can.style.width*/
/*第二步，获取canvas的上下文（也就是画布的工具栏）*/
var ctx = can.getContext('2d');
/*第三部：绘制*/
/*画图，第一步，定位坐标点*/
ctx.moveTo(100,100)//将画笔移动到100，100的坐标点
ctx.lineTo(200,100)//将画笔从100,100水平移动到200,100的位置
ctx.lineTo(100,200)//将画笔从200,100移动到100,200的位置
/*闭合路径*/
ctx.closePath()闭合路径
//设置线宽
ctx.lineWidth = 4;
//设置描边
ctx.strokeStyle = 'red';//设置描边样式
ctx.stroke()//描边的意思
//设置填充
ctx.fillStyle = 'yellow';//设置填充样式
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;//设置圆的初始角度
var x0=300,y0=300;
var radius = 200;
for(var i = 0; i < data.length; i++){
ctx.beginPath();//因为每个扇形属性都不同，所以每次开辟一个路径；
ctx.moveTo(x0,y0);
var angle = data[i].value*360;//定义扇形宽度（角度）
ctx.fillStyle = data[i].color;
/*设置扇形起点*/
var startAng = ang*Math.PI/180;
/*设置扇形的重点*/
var endAng = (ang+angle)*Math.PI/180;
ctx.arc(x0,y0,radius,startAng,endAng);
ctx.fill();
//把下个扇形的起点变成当前扇形的终点；
ang+=angle;
}
}());
</script>
</html>
