Canvas学习

参考了慕课网课程：炫丽的倒计时效果Canvas绘图与动画基础 

感谢  liuyubobobo 老师 ，提供了这么好的课程

1、<canvas><canvas>标签

    注意：最好在标签中指定canvas的width 和 height 或者用js : canvas.width , canvas.height

    <canvas>如果你的浏览器支持canvas，那么你将看不到这行文字</canvas>

    注意：canvas是基于状态来绘制的。

2、画一条直线：

var canvas = document.getElementById("line"); //获取画布节点
canvas.width =1366; //设置画布的宽
canvas.height =600; //设置画布的高
if(canvas.getContext){
var ctx = line.getContext("2d");
ctx.moveTo(100,100); //移动到位置（100,100）
ctx.lineTo(500,500); //从位置（100.100）画线到 位置 （500，500）
ctx.lineTo(100,500); //从位置（500,500）画线到 位置 （100,500）
   ctx.lineTo(100,100);
ctx.stroke();
}

 

效果图：

 

修改之前的代码如下：

 

 var canvas = document.getElementById("line");
canvas.width =1366;
canvas.height =600;
if(canvas.getContext){
　　var ctx = line.getContext("2d");
　　ctx.beginPath();// 开始一段新的画
　　ctx.moveTo(100,100);
　　ctx.lineTo(500,500);
　　ctx.lineTo(100,500);
10　　 ctx.lineTo(100,100);
11　　 ctx.fillStyle ="#6699cc"; //设置填充颜色
　　ctx.fill(); //执行填充操作
　　ctx.lineWidth =5; //设置线宽
　　ctx.strokeStyle ="rgba(0,255,0,.5)"; //设置画线的颜色
　　ctx.stroke(); //画线（会基于之前设置的三个 lineTo的坐标位置而依次画图）
   ctx.closePath(); //结束这段画
}

 

效果如下：

 

 

熟练之后可以用下面这段代码画出一个美丽的七巧板：

var tangram =[
　　{p:[{x:100,y:100},{x:300,y:300},{x:500,y:100}],color:'#CAFF67'},
　　{p:[{x:100,y:100},{x:300,y:300},{x:100,y:500}],color:'#6699CC'},
　　{p:[{x:100,y:500},{x:200,y:400},{x:300,y:500}],color:"pink"},
　　{p:[{x:200,y:400},{x:300,y:300},{x:400,y:400},{x:300,y:500}],color:'purple'},
　　{p:[{x:300,y:300},{x:400,y:200},{x:400,y:400}],color:'yellow'},
　　{p:[{x:400,y:200},{x:500,y:100},{x:500,y:300},{x:400,y:400}],color:'red'},
　　{p:[{x:300,y:500},{x:500,y:300},{x:500,y:500}],color:'orange'}
]
window.onload =function(){
　　var canvas = document.getElementById("line"),
　　i =0;
　　canvas.width =1366;
　　canvas.height =600;
　　if(canvas.getContext){
　　　　var context = canvas.getContext("2d");
　　　　for(i =0;i<tangram.length;i++){
　　　　　　draw(tangram[i],context)
　　　　}
　　}
}
function draw(piece,cxt){
　　cxt.beginPath();
　　cxt.moveTo(piece.p[0].x,piece.p[0].y);
　　var i =1;
　　for(;i < piece.p.length;i++){
　　　　cxt.lineTo(piece.p[i].x,piece.p[i].y);
　　}
　　cxt.closePath();
　　cxt.fillStyle=piece.color;
　　cxt.fill();
　　cxt.fillStyle ="#000000";
　　cxt.lineWidth =3;
　　cxt.stroke();
}

 

效果图：

 

 

另外我这里还做了一个Demo，当你输入自己的英文名时，你可以看到圆球跳跃的效果显示你的英文名，由于篇幅，不详说，

效果图：

具体的代码见github: 

https://github.com/caibinterry/test/tree/caibin/%E8%B7%B3%E5%8A%A8%E7%9A%84%E8%8B%B1%E6%96%87%E5%90%8D

 

 

来自为知笔记(Wiz)