JavaScript Canvas 创建带缺口的圆形
要创建一个带缺口的圆形,你可以使用 'arc()' 方法,并指定不同的起始角度和终止角度来创建圆弧的一部分。下面是一个示例代码:
// 创建画布
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 定义圆的属性
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;
var startAngle = 0; // 起始角度
var endAngle = Math.PI * 1.5; // 终止角度
// 绘制圆的一部分
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.lineTo(centerX, centerY); // 添加缺口
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();
在上面的代码中,我们使用 'arc()' 方法创建一个圆的一部分,起始角度为 0,终止角度为 1.5 倍的 PI(半圆)。然后,我们使用 'lineTo()' 方法将终点连接回起点,形成缺口。最后,我们用 'fill()' 方法填充圆的内部颜色。
你可以根据需要调整起始角度和终止角度的值来创建不同大小和位置的缺口圆。
原文地址: https://www.cveoy.top/t/topic/pUca 著作权归作者所有。请勿转载和采集!