canvas入门基础1

canvas即一个H5的新标签，通过js来实现绘图的神奇功能。

<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 context =canvas.getContext("2d");

写个小例子1

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

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

<script>
   var oC=document.querySelector('#mycontext');
  var context=oC.getContext('2d'); 
  context.moveTo(0,0);   
  context.lineTo(150,50);  
  context.lineTo(20,100); 
  context.strokeStyle = "blue";   
  context.stroke();  
   
 context.beginPath();
  context.moveTo(90,90); 
  context.lineTo(80,150);  
  context.strokeStyle = "red";  
 context.closePath(); 
  context.stroke();  
</script>

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

小例子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); //矩形
      }
    </script>

绘制矩形的两个小方法
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基础，未完待续。。。。 どうぞよろしくおねがいします。