Canvas 学习笔记

---

基本信息

• 默认为 inline ，默认大小为 width:300px;height:150px;，默认 黑色
• 默认原点为左上角，向右为 X轴 正方向，向下为 Y轴 正方向
• 参照 W3C 标准， 的大小应该写在标签中，并且不写单位，如下：
  
• 也可以在 JavaScript 中使用 canvas.width，canvas.height 设置画布宽高（同样不用写单位）

---

画一条直线

• 起点（状态） context.moveTo()
• 终点（状态） context.lineTo()
• 线条宽度 context.lineWidth = 5
• 线条颜色 context.strokeStyle = '#00588'
• 画线条（绘制） context.stroke()
• canvas 是基于状态的绘图，即：整个绘图过程应该是先设置绘图的状态，之后调用具体的函数来进行具体绘制

    // 画个三角形
    context.moveTo(100,100);
    context.lineTo(700,700);
    context.lineTo(100,700);
    context.lineTo(100,100);
    context.lineWidth = 5;
    context.strokeStyle = "#005588";
  
    context.stroke();
  

  

  canvas 三角形

---

实心图形

• 填充颜色：.fillStyle = xxx
• 填充：.fill()

    ...
    context.fillStyle = 'rgb(2,100,30)'
    context.fill();

实心图形

    context.lineWidth = 5;
    context.strokeStyle = "#005588";
    context.stroke();

    context.fillStyle = 'rgb(2,100,30)'
    context.fill();

• 以上两种方式可以共用，实现一个 带边框且被填充的三角形

• 如果想画两条线，为保证两条线互不干扰，需要重新调用 beginPath()

• beginPath() 和 closePath() 不一定非要成对出现，由于 closePath() 会将绘制图形的首尾自动闭合，所以视情况决定是否调用 closePath()

• closePath() 对于 .fill() 无效，即：当填充时，无论是否有 closePath() ，都会按照闭合状态进行填充

    context.beginPath();        // 第一条开始
    context.moveTo(100,100);
    context.lineTo(700,700);
    context.lineTo(100,700);
    context.lineTo(100,100);
    context.closePath();        // 第一条结束
  
    context.fillStyle = 'rgb(2,100,30)'
    context.fill();
  
    context.lineWidth = 5;
    context.strokeStyle = 'red';
    context.stroke();
  
    context.beginPath();          // 第二条开始
    context.moveTo(200,100);
    context.lineTo(500,100);
    context.closePath();          // 第二条结束
    context.strokeStyle = 'black';
    context.stroke();
  

  

  画两个图形

---

画个七巧板

Canvas 七巧板

画弧线

• context.arc( 圆心x轴 , 圆心y轴 , 半径 , 开始弧度 , 结束弧度 [,顺/逆时针] )，默认顺时针 false;

• 无论画的方向如何，起点和终点位置都是不变的

  
  
  

  都从右极点开始画

    context.lineWidth = 5;
    context.strokeStyle = 'red';
    // 起点  终点  半径  开始弧度  结束弧度
    context.arc(300,300,200,1*Math.PI,1.5*Math.PI);
    context.stroke();

9点位置画到12点位置

    context.lineWidth = 5;
    context.strokeStyle = 'red';
    // 起点  终点  半径  开始弧度  结束弧度
    context.arc(300,300,200,1.5*Math.PI,1*Math.PI);
    context.stroke();

12点位置画到9点位置

---