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