Canvas(一)基础

在HTML文档种使用<canvas id="canvaas"></canvas>来声明画布，Canvas是基于状态的绘制

window.onload=function() {
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768; //定义画布大小

var context = canvas.getContext("2d")//绘图方式

context.beginPath() // 多图绘制需要用 beginPath closePath将绘制路径包起来
context.moveTo(100,100);//moveTo 相当于绘制的开始位置(笔尖的位置)
context.lineTo(700,700);//lineTo 绘制的线(笔的移动位置)
context.lineTo(100,700);
context.closePath()
context.fillStyle = "rgb(2,100,30)" // 内部填充

context.fill()//基于状态的填充

context.lineWidth = 5 // 线宽
context.strokeStyle="red"//线的颜色，可以CSS的任何方式
context.stroke();//基于状态的，最的进行绘制

context.beginPath()// 多图绘制需要用 beginPath closePath将绘制路径包起来
context.moveTo(200,100)
context.lineTo(800,700)
context.closePath()
context.lineWidth = 1 
context.strokeStyle ="blue" //对前一个beginPath closePath生效
context.stroke()
};

DEMO

<script>
  var tangram = [
    {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
    {p:[{x:0,y:0},{x:0,y:800},{x:400,y:400}],color:"#67becf"},
    {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
    {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
    {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
    {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
    {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
  ]

  window.onload=function() {
    var canvas = document.getElementById('canvas');
    canvas.width = 800;
    canvas.height = 800; //定义画布大小

    var context = canvas.getContext("2d")//绘图方式

    for (var i = 0;i < tangram.length; i++){
      draw(tangram[i],context);
    }

    function draw(piece,cxt) {
      cxt.beginPath()
      cxt.moveTo(piece.p[0].x,piece.p[0].y);
      for (var i =1; i < piece.p.length; i++){
        cxt.lineTo(piece.p[i].x,piece.p[i].y)
      }
      cxt.closePath()

      cxt.fillStyle = piece.color;
      cxt.fill()

      cxt.strokeStyle = '#000'
      cxt.stroke()
    }
  };
</script>

效果