了解canvas画布

一、什么是 Canvas？

• HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像
• 画布是一个矩形区域，可以控制其每一像素
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

二、canvas基本使用

• 添加canvas元素(创建画布)

<canvas id="myCanvas" width="300" height="300"> </canvas>

canvas画布的默认尺寸是300*150

• 通过JavaScript绘制图像

<script>
// 1、获取到canvas元素
var c= document.getElementById("myCanvas");
// 2、执行上下文（绘制画笔）
var ctx= c.getContext('2d');
// 3、填充矩形
ctx.fillRect(30, 30, 100, 100);
</script>

三、绘制的方法

绘制矩形

  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    //根据指定id，得到对象
    var c=document.getElementById("myCanvas");
    //然后创建context对象
    var cxt=c.getContext("2d");
    //fillStyle属性可以填充颜色。
    cxt.fillStyle="pink";
    cxt.fillRect(0,0,150,75);
  </script>

绘制线条

 <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
    //根据指定id，得到对象
    var c=document.getElementById("myCanvas");
    //然后创建context对象
    var cxt=c.getContext("2d");
    cxt.beginPath();//开始绘制路径（可写），可理解为断点，如果只有一个可不写，若有多个线条，让上一个和下一个不受影响，就要加上此方法
    cxt.moveTo(10,10);  //移动到指定位置，开始坐标
    cxt.lineTo(150,50);  //创建到达位置的一条线，结束坐标
    cxt.lineTo(10,50);
    cxt.strokeStyle="pink";  //路径颜色
    cxt.lineWidth="5";  // 线宽
    cxt.stroke(); //进行绘制（结束，颜色，宽度等都在里面进行）
    </script>

绘制圆

  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    //根据指定id，得到对象
    var c=document.getElementById("myCanvas");
    //然后创建context对象
    var cxt=c.getContext("2d");
    cxt.beginPath();
    cxt.strokeStyle = "pink";
     //arc(x,y,半径,起始角度0，结束角度2*Math.PI)
    cxt.arc(95,50,40,0,2*Math.PI);
    cxt.stroke();
  </script>

案例：绘制太极图

<canvas id="cv" width="300px" height="300px"></canvas>
    <script>
        var canvas = document.getElementById("cv");
        var context = canvas.getContext("2d");
        
        context.beginPath();
        context.arc(100,100,100,0,Math.PI*2);
        context.closePath();
        context.stroke();
        
        context.beginPath();
        context.arc(100,100,100,1.5,Math.PI*1.5);
        context.closePath();
        context.fill();
        		
        context.beginPath();
        context.arc(100,50,50,0,Math.PI*2);
        context.fillStyle = "white";
        context.closePath();
        context.fill();
        
        context.beginPath();
        context.arc(100,150,50,0,Math.PI*2);
        context.fillStyle = "black";
        context.closePath();
        context.fill();
        
        context.beginPath();
        context.arc(100,50,15,0,Math.PI*2);
        context.fillStyle = "black";
        context.closePath();
        context.fill();
        
        context.beginPath();
        context.arc(100,150,15,0,Math.PI*2);
        context.fillStyle = "white";
        context.closePath();
        context.fill();
    </script>