canvas 的使用1

canvas ：画布：

1.引入< canvas>< /canvas> 标签

  canvas 在浏览器中默认是(宽300px,高150px)的大小，没添加样式是看不到的，在IE8以下的浏览器不兼容，所以在标签里面填写“< canvas>"你的浏览器不兼容canvas"< /canvas>”

canvas  画图步骤：

1.建立画布-->在body中引入< canvas >< /canvas> 标签，画布的大小样式只能在行   间设置  示例：

<canvas id="c" width="400px" height="400px">你的浏览器不支持canvas</canvas>

     PS: 需要在样式中设置背景颜色，才可以看到canvas

2. 在javascript标签中获取到canvas，再建立2D环境-->var ocg=oc.getContext('2d')。

    示例：

<script>
windoad=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d')
}
</script>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成.

1.用Canvas的2D环境中绘制带填充方框:方法:画布.fillRect(起始的X值，起始的Y值，宽度，高度)默认的填充颜色是黑色

  示例：

<script>
windoad=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d')
   ocg.fillRect(10,10,100,100); 
}
</script>

2.用Canvas的2D环境中绘制带边框的方框:方法:画布.strokeRect(起始的X值，起始的Y值，宽度，高度)默认的边框颜色是黑色1px

strokeRect() -->绘制矩形

示例：

<script>
windoad=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d')
   ocg.strokeRect(10,10,100,100); 
}
</script>

设置绘图属性：

1.fillStyle -->设置填充颜色

2.strokeStyle -->设置边框颜色

3..lineWidth -->设置边框宽度

示例：

<script>
windoad=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d')
  ocg.strokeStyle='blue'  ocg.lineWidth=10;  ocg.fillStyle='#000'  ocg.strokeRect(10.5,10.5,100,100); // 1.先绘制边框，后面的绘制的图形会覆盖前面的图形  ocg.fillRect(10,10,100,100);       //
}
</script>

设置绘图边界：

1.lineJoin -->设置边界连接点样式，值：

       --miter(默认) ,  --round(圆角)  ,-- bevel(斜角)

          示例：ocg.lineJoin='bevel'

2.lineCap -->设置端点样式，值：(用于非封闭的图形：直线、半弧..)

       --butt(默认) ,  --round(圆角)  ,-- square(高度多出为宽一半的值)

设置绘制路径：

1.beginPath() -->开始绘制路径(绘图开始)

2.moveTo(x,y) -->移动到绘制的新目标点(起始点坐标)-->第一个点坐标

3.lineTo(x,y) -->新目标点(终点坐标) -->第二个点坐标 / 第三.四.五个点坐标都用着个

4.stroke() -->连线(绘制)画线  --也可以使用填充fill()

5.closePath() -->结束绘制路径(绘图结束)-> 闭合图形(放在stroke()前面会把图形自动进行闭合)

示例:

<script>
windoad=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d')
   ocg.beginPath();
   ocg.moveTo(100,100);
   ocg.lineTo(200,200);
   ocg.lineTo(300,200);
   ocg.closePath();
   ocg.stroke();  // 图形一 自动闭合
       ocg.beginPath();
       ocg.moveTo(100,200);
       ocg.lineTo(200,300);
       ocg.lineTo(300,300);
       ocg.stroke();
       ocg.closePath();// 图形二 不闭合   
}
</script>

绘制路径2

1.clearRect() -->删除一个画布的矩形区域

  示例：  -- ocg.clearRect(0,0,oc.width,oc.height)  清除画布

2.save() -->保存路径

3.restore() -->恢复路径

解析：save() 和restore() --》类似一对括号，两个里面的属性只对里面的图形有效果

示例：

 var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
       ocg.save() ;
       ocg.fillStyle='blue'
       ocg.beginPath();
       ocg.moveTo(100,100);
       ocg.lineTo(200,200);
       ocg.lineTo(300,200); 
       ocg.closePath()
       ocg.fill(); 
       ocg.restore();
        ocg.beginPath();
       ocg.moveTo(100,200);
       ocg.lineTo(200,300);
       ocg.lineTo(300,300); 
       ocg.closePath()
       ocg.fill();