canvas

canvas的学习记录

首先要在html中创建一个canvas标签

<canvas id="test"></canvas>

然后在js代码块中就可以获取canvas对象，并进行一系列的操作

	let canvas = document.getElementById('test');
    let ctx = canvas.getContext('2d'); //类似于创建一个画笔工具

然后实现一个最简单的例子，画一个三角形

      canvas.width = 500; //设置画布的宽高
      canvas.height = 500;
      ctx.moveTo(50,50);
      ctx.lineTo(150,50);
      ctx.lineTo(150,150);
      // ctx.lineTo(50,50);  //也可以使用ctx.closePath()闭合;
      ctx.stroke();  //不使用stroke方法不会显示

绘制圆形（圆弧）

	  //绘制一个30度的弧度
      ctx.arc(300, 300, 100, 0, 30 * Math.PI /180, true) //参数依次为为圆心x,y坐标，半径， 起始、终止角度，是否逆时针方向
      ctx.stroke();

绘制扇形的文字

	  let text = '20%';
      let x = 300 + Math.cos(-60 * Math.PI / 180) * 12