【微信_小游戏_canvas_基础_笔记2】

微信_小游戏_canvas_基础_笔记2

小技巧

var ctx = canvas.getContext("2d")
console.log("ctx_s_2",ctx);

打印出来的ctx_s_2可以查看信息

上图可以理解是ctx的属性
下图可以理解是ctx的内置函数(展示不完整,可自行打印查看)

下图是函数arc
以函数arc为例,其中length : 5,表示需要5个参数

弧形

ctx.beginPath();
ctx.arc(
  100,550, // 圆心坐标 x , y
  50,  // 圆半径
  0, // 开始角度(弧度计算)
  Math.PI/180*270, // 结束角度(弧度计算)
  false // true为逆时针 false为顺时针
);
ctx.stroke();

Math.PI 可以理解为一个常量
有兴趣的同学可以自行研究 PI / 180 * 度数(参数)

饼状图

画饼状图,其实理解2点
1,弧线闭合
2,第二个开始的弧线,是第一个弧线的结尾

// 画饼状图
ctx.beginPath(