圆弧绘制
- 弧度概念
- arc()
- x 圆心横坐标
- y 圆心纵坐标
- r 半径
- startAngle 开始角度
- endAngle 结束角度
- anticlockwise 是否逆时针方向绘制(默认false表示顺时针;true表示逆时针)
圆弧语法 : arc(x, y, radius半径, 弧度start, 弧度end, 方向:默认顺时针false);
画圆弧的步骤
- 确定圆心
- 确定半径
- 确定绘制的起始位置和结束位置
- 确定方向
//例1.需求 : 在中心位置画一个半径为150px的圆弧右下角
var ctx = document.querySelector("canvas").getContext("2d");
var w = ctx.canvas.width;
var h = ctx.canvas.height;
//右上角四分之一的圆弧
ctx.arc(w / 2, h / 2, 150, 0, Math.PI * 3/ 2, true);
ctx.stroke();`
例2 绘制右上角四分之一圆弧的扇形
var ctx = document.querySelector("canvas").getContext("2d");
//把起点放到圆心位置
ctx.moveTo(300, 200);
ctx.arc(300, 200, 150, 0, Math.PI * 3 / 2, true);
ctx.closePath();
ctx.fill();
//ctx.stroke();
效果图
例3 绘制六等分颜色随机的圆
var ctx = document.querySelector("canvas").getContext("2d");
var w = ctx.canvas.width;
var h = ctx.canvas.height;
var num = 6;
//每一份是多少弧度呢
var angle = Math.PI * 2 / num;
//获取随机颜色
var randomColor = function () {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb('+r+','+g+','+b+')';
}
//上一次的结束弧度 = 当前的起始弧度
//var startAngle = 0;//
for(var i= 0 ; i <num ; i++){
ctx.beginPath();
ctx.moveTo(w / 2, h / 2);
ctx.arc(w / 2, h / 2, 150, i*angle, (i+1)* angle);
ctx.fillStyle = randomColor();
ctx.fill();
}
效果图