canvas学习笔记一

html5新增的canvas标签可用来绘图。今天开始学习了一点绘制基础。

一、绘制三角形

1）canvas绘图是基于状态的绘图，也就是说应该先设置绘图状态，再调用函数进行绘制
2）坐标系：canvas的左上角为原点，向右为x轴正方向，向下为y轴正方向 

绘图步骤：

1）定义标签

<canvas id='canvas1'>  当前浏览器不支持canvas，换个浏览器试试   //向下降级，如果浏览器支持，会忽略标签里的文字</canvas>

2）在js中初始化

  //初始化  var canvas=document.getElementById('canvas1');  canvas.width=1024;  canvas.height=500;  //获取绘图上下文环境，是进行绘制所需的接口  var context=canvas.getContext('2d');

我们之后的操作都是基于context对象

3）设置绘图状态

   context.moveTo(50,50);   context.lineTo(50,500);   context.lineTo(500,50);   context.lineTo(50,50);      context.lineWidth=5;   context.strokeStyle='red'; //边框颜色

4）调用绘制函数

  context.stroke();  //绘制，用线来绘制轮廓

效果图：

二、简单的绘制了一个三角形，那如果想在一个canvas里边绘制两个图形怎么办勒？

太简单了，在重新重复一下上面的操作就好了嘛！

  context.moveTo(50,50);  context.lineTo(50,500);  context.lineTo(500,50);  context.lineTo(50,50);    context.lineWidth=5;  context.strokeStyle='red'; //边框颜色  context.stroke();  //绘制            //直线          context.moveTo(100,100);  context.lineTo(500,500); 

          context.strokeStyle='blue'; 

          context.stroke();        

但是效果图是？

        诶，这是怎么回事勒？怎么两个都是蓝色，而且线宽都是5？

这里就要回到我们最开始说的canva是基于状态绘图了，再结束了第一次绘图之后，执行第二次绘图时，会将页面上的context
设置的状态都执行一次，所以第二次绘图会把第一个三角形覆盖，，并且使用了边框颜色也会blue替换了， 而之前的线宽状态也会绘制到直线处.。

       如何解决这个问题，使得两次绘图互不影响勒？

需要用到函数：

  beginPath() 新建一条路径
  closePath() 闭合这条路径
  闭合路径之后图形绘制命令会指向这条路径

  context.beginPath();  context.moveTo(50,50);  context.lineTo(50,500);  context.lineTo(500,50);  context.lineTo(50,50);  context.closePath();    context.lineWidth=5;  context.strokeStyle='red'; //边框颜色  context.stroke();  //绘制         context.beginPath();         context.moveTo(100,100);  context.lineTo(500,500);  context.closePath();    context.strokeStyle='blue';   context.stroke();  //绘制，通过线条来绘制图形轮廓

效果如图：

三、填充图形

  context.fillStyle指定图形填充颜色，   context.fill()执行实心绘图

          context.beginPath();  context.moveTo(50,50);  context.lineTo(50,500);  context.lineTo(500,50);  context.lineTo(50,50);  context.closePath();    context.lineWidth=5;  context.strokeStyle='red'; //边框颜色  context.stroke();  //绘制  context.fillStyle='green';  context.fill();

效果如图：

感觉哪里不对勒？三角形的边框线宽没有5。

把fill和stroke的命令调整一下顺序即可。

听课来自慕课网

课程链接：http://www.imooc.com/learn/133