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)

巴特西

Canvas学习

最新文章

热门文章