绘制倒计时时钟
1 绘制一条线
//设置状态
context.moveTo(100,100) //起点
context.lineTo(700,700) //终点
//绘制
context.stroke() //使线呈现 stroke中文解析：划掉; 轻抚; 轻触; 敲击;
//我们可以用下面api绘制线条
context.moveTo();
context.lineTo();
//在定义多条路径要在相对应的线条加上
context.beginPath();
context.closePath();
//利用下面可以定义线条的宽度，颜色，填充颜色
context.lineWdith();
context.strokeStyle();
context.fillStyle();
//利用下面方法使得线条绘制出来，和填充颜色成功
context.stroke();
context.fill();
然后利用刚学的线条绘制个七巧板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>七巧板</title>
</head>
<body>
<canvas id="canvas" width="1000" height="768" style="border:1px solid #000;display:block;margin:50px auto"></canvas>
<script type="text/javascript">
window.onload=function(){
var qiqiao = [
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:800},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#caff67"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800},{x:400,y:800}],color:"#f6ca29"},
]
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
for(var i = 0; i<qiqiao.length;i++){
console.log(qiqiao.length);
draw(qiqiao[i],context);
}
function draw(qiqiao , cxt ){
cxt.beginPath();
cxt.moveTo(qiqiao.p[0].x , qiqiao.p[0].y);
for(var i = 1; i < qiqiao.p.length ; i++){
console.log(qiqiao.p.length );
cxt.lineTo( qiqiao.p[i].x , qiqiao.p[i].y);
}
cxt.fillStyle = qiqiao.color;
cxt.fill();
}
}
</script>
</body>
</html>
2 绘制弧线
canvas 中的方法
context.arc(
context,centery,radius,startingAngle,endingAngle,
anticlockwise = false
//圆心坐标x、圆心坐标y、半径值、弧度起始值、弧度结束值、顺逆时针（可选，默认flase 瞬时）
)
圆的起始状态和终点状态看图
屏幕快照 2016-11-30 下午11.57.13.png
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆弧示例</title>
</head>
<body>
<canvas id="canvas" width="1000" height="768" style="border:1px solid #000;display:block;margin:50px auto"></canvas>
<script type="text/javascript">
window.onload=function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 1024;
canvas.height = 768;
context.lineWidth = 5
context.strokeStyle = "#000";
// 此例子有closePath() 作用也有闭合的功能
for(var i =0 ; i<10 ;i++){
context.beginPath()
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10)
context.closePath()
context.stroke()
}
// 此例子没有closePath() 说明beginPath()和closePath()不用同时出现
for(var i =0 ; i<10 ;i++){
context.beginPath()
context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10)
context.stroke()
}
//逆时针
for(var i =0 ; i<10 ;i++){
context.beginPath()
context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true)
context.closePath()
context.stroke()
}
for(var i =0 ; i<10 ;i++){
context.beginPath()
context.arc(50+i*100,480,40,0,2*Math.PI*(i+1)/10,true)
context.stroke()
}
//填充颜色
context.fillStyle = "#000";
for(var i =0 ; i<10 ;i++){
context.beginPath()
context.arc(50+i*100,600,40,0,2*Math.PI*(i+1)/10,true)
context.stroke()
context.fill();
}
}
</script>
</body>
</html>
