cansvas基础入门（一）

canvas，是一个H5的新标签，通过js来实现绘图的神奇功能。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

那么我们怎么来使用canvas标签呢？

<canvas width="800" height="600" id="context"></canvas>

注意，在这里我直接在行间设置了宽高，是因为若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素，而且不能使用css来设置（会被拉伸），建议直接写于canvas标签内部，或者是直接用js脚本中来设置。如下：

<script>
var context = document.getElementById("myCanvas");
context .width=200;
context .height=200;
</script>

首先，获取canvas的绘图环境，这是一个封装了很多绘图功能的对象。

 var  gd =canvas.getContext("2d");

来举个栗子

<script>
            var oC=document.querySelector('#mycontext');
            var  gd =oC.getContext('2d'); //获取该canvas的2D绘图环境对象
            gd .moveTo(10,10); //定义绘画开始的位置
            gd .lineTo(150,50); //画一条直线，结束点坐标是x=150,y=50
            gd .strokeStyle='red'; //设定描边颜色为红色，要写在.stroke()方法前面
            gd .lineWidth=20; //设定描边粗细为20，不要写px
            context.stroke(); //描边,即绘制边框
    </script>

我们使用了几个绘图方法：
1.moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置
2.lineTo(x坐标 , y坐标) 顾名思义，就是画一条直线到某个点，此方法只做路径运动，并没有视觉上的效果。
3.stroke() 描边方法 让运动路径从视觉上显现 用 画笔描出来
4.strokeStyle 设定颜色的方法 可以直接用颜色名称，例如"red" "green",或者用十六进制颜色"#fff",还有rgb(0-255,0-255,0-255)， rgba(0-255,0-255,0-255,透明度)。

栗子2 用canvas写出两个不一样颜色的线 ：

<script>
    var oC=document.querySelector('#mycontext');
    var gd =oC.getContext('2d'); 
    gd .moveTo(0,0);   
    gd .lineTo(150,50);  
    gd .lineTo(20,100); 
    gd .strokeStyle = "blue";   
    gd .stroke();  

    gd .beginPath();
    gd .moveTo(90,90); 
    gd .lineTo(80,150);  
    gd .strokeStyle = "red";  
    gd .closePath(); 
    gd .stroke();  
</script>

关于路径beginPath和closePath
1、系统默认在绘制第一个路径的开始点为beginPath
*2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
ps：记住每次画路径都在前后加gd .beginPath() 和gd .closePath()

当然canvas也可以绘制出各种图形
栗子3 绘制矩形

<script>
        window.onload= function () {
            var oC=document.querySelector('#c1');
            var gd=oC.getContext('2d');

            gd.strokeStyle='red';//边的颜色
            gd.lineWidth=20;    //边的宽度
            gd.fillStyle='green'; // 整个涂满的颜色
            gd.fillRect(100,100,200,300); //满矩形（x矩形起点横坐标，y矩形起点纵坐标，矩形宽度，矩形高度）
            gd.strokeRect(100,100,200,300); //矩形
      }

绘制矩形有两个小方法：

1 context.fillRect(x,y,width,height) 所谓的满矩形就是填充一个矩形

2 strokeRect(x,y,width,height) 绘制矩形（不填色）。笔触的默认颜色是黑色。
相反 清除矩形区域即为

context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

---

canvas更多有趣的东西，我们下次再讲~~~