canvas基础学习笔记（一）

2017-04-25 本文已影响395人开心糖果的夏天

canvas是定义在浏览器上的画布，canvas不仅仅像是p标签等的一个元素，canvas更是一个编辑工具，是一套编程的接口，它的出现已然超过了Web基于文本的设计初衷。canvas可以设计出绚丽的动画，奇妙的游戏等，可以是你的网页绚丽多彩！

一、canvas绘图环境搭建

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>canvas</title>
</head>

<body >
 <canvas id="canvas" style="border: 1px solid #eee;display: block;margin: 50px auto">
 当前浏览器不支持canvas，请更换浏览器后再试
 </canvas>

 <script type="text/javascript">
    window.onload=function(){
      var canvas=document.getElementById('canvas');

      canvas.width=800;
      canvas.height=800;

      var context=canvas.getContext('2d');

      //使用context进行绘制(canvas是基于状态的绘制环境)
  
  }
</script>

</body>
</html>

二、绘制直线

context.moveTo();指定所绘直线的起点坐标
context.lineTo();指定所绘直线的终点坐标
context.stroke();绘制
示例如下：
context.lineWidth用于设置所绘直线的宽度，context.strokeStyle用于设置所绘直线的颜色。

<script type="text/javascript">
    window.onload=function(){
      var canvas=document.getElementById('canvas');

      canvas.width=800;
      canvas.height=800;

      var context=canvas.getContext('2d');

      //绘制(canvas是基于状态的绘制环境)
      context.moveTo(100,100)
      context.lineTo(700,700)
      context.lineWidth=10
      context.strokeStyle="#058"
      context.stroke();    
  }
</script>

三、多边形的封闭与填充

context.beginPath();...context.clocePath();封闭所绘的多边形
context.fillStyle用于设置所绘箭头的填充色
context.strokeStyle用于设置所绘箭头的边框色

<script type="text/javascript">
    window.onload=function(){
      var canvas=document.getElementById('canvas');
      
      canvas.width=800;
      canvas.height=800;
    
      var context=canvas.getContext('2d');

      //封闭多边形的绘制与填充（箭头)
      context.beginPath()
      context.moveTo(100,350)
      context.lineTo(500,350)
      context.lineTo(500,200)
      context.lineTo(700,400)
      context.lineTo(500,600)
      context.lineTo(500,450)
      context.lineTo(100,450)
      context.closePath()
      
      context.lineWidth=10
      context.fillStyle="yellow"
      context.strokeStyle="blue"

      context.fill()
      context.stroke()    
}
</script>

四、绘制矩形

context.rect(x,y,width,height)
context.fillRect(x,y,width,height);绘制带填充色的矩形
context.strokeRect(x,y,width,height);绘制带边框色的矩形

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
       canvas.width=800;
       canvas.height=800;
       var context=canvas.getContext('2d');

       //矩形覆盖和透明色
       drawRect(context,100,100,400,400,10,"#058","red")
       drawRect2(context,300,300,400,400,10,"#058","rgba(0,256,0,0.5")//不透明色的值为0.5
     }

      function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
         cxt.beginPath();
         cxt.rect(x,y,width,height);
         cxt.closePath();

         cxt.lineWidth=borderWidth;
         cxt.fillStyle=fillColor;
         cxt.strokeStyle=borderColor;

         cxt.fill();
         cxt.stroke();    
      }

      function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor){

         cxt.lineWidth=borderWidth;
         cxt.fillStyle=fillColor;
         cxt.strokeStyle=borderColor;

         cxt.fillRect(x,y,width,height);
         cxt.strokeRect(x,y,width,height);    
      }

</script>

五、线条的属性

1.lineCap用于设置线条两端的形状。包含三个值：butt（默认值）、round（圆头）、square（方头）。

<script type="text/javascript">
       window.onload=function(){
       var canvas=document.getElementById('canvas');
       canvas.width=800;
       canvas.height=800;
    
       var context=canvas.getContext('2d');
       //开始绘制
       context.lineWidth=50;
       context.strokeStyle="#005588";

       context.beginPath();
       context.moveTo(100,200);
       context.lineTo(700,200);
       context.lineCap="butt";
       context.stroke();

       context.beginPath();
       context.moveTo(100,400);
       context.lineTo(700,400);
       context.lineCap="round";
       context.stroke();

       context.beginPath();
       context.moveTo(100,600);
       context.lineTo(700,600);
       context.lineCap="square";
       context.stroke();

       context.lineWidth=1;
       context.strokeStyle="#27a";
       context.moveTo(100,100);
       context.lineTo(100,700);
       context.moveTo(700,100);
       context.lineTo(700,700);
       context.stroke();
     }
</script>

2.lineJoin用于设置线条与线条相交时呈现的状态。包含三个值：miter（默认值）、bevel、round（圆头）。

<script type="text/javascript">
       window.onload=function(){
       var canvas=document.getElementById('canvas');
       canvas.width=800;
       canvas.height=800;
       var context=canvas.getContext('2d');

       //用变量的方式绘制五角星(函数化)
       context.lineWidth=10;
       context.lineJoin="miter";
       drawStar(context,150,300,400,400,0);
      }
      function drawStar(cxt,r,R,x,y,rot){
       cxt.beginPath();
       for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
            cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
       }
       cxt.closePath();
       cxt.stroke();
      }
</script>

六、总结（五角星绘制）

思路：将五角星放在同心圆上进行绘制，分析如下图：

五角星绘制思路图.jpg

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=800;
       canvas.height=800;
       var context=canvas.getContext('2d');

       //用变量的方式绘制五角星(函数化)
       context.lineWidth=10;
       drawStar(context,150,300,400,400);
      }

      function drawStar(cxt,r,R,x,y){
       cxt.beginPath();
       for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+x,-Math.sin((18+i*72)/180*Math.PI)*R+y);
            cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,-Math.sin((54+i*72)/180*Math.PI)*r+y);
       }
       cxt.closePath();
       cxt.stroke();
      }
</script>