Мобильная версияЯ пытаюсь использовать градиент для заполнения области холста, но мне хотелось бы иметь возможность устанавливать угол градиента.
Я знаю, что это возможно, если использовать разные значения при создании градиента (ctx.createLinearGradient(x1, y1, x2, y2)), как показано здесь:
Но я, похоже, не могу разобраться в математических расчетах, необходимых для преобразования угла (радианы) в размер градиента, который даст тот же угол (угол, о котором я говорю, перпендикулярен направлению градиента). , поэтому угол в радианах 0 будет показывать градиент справа)
Коротко говоря, как я могу преобразовать (количество) радиан в форму X по Y?
$(document).ready(function(){ var Canvas = document.getElementById("тест"); var ctx = Canvas.getContext("2d"); угол вар = 0,5; ctx.beginPath(); ctx.moveTo(100, 100); ctx.arc(100, 100, 100, 0, -угол, правда); ctx.lineTo(100, 100); ctx.closePath(); // Преобразуем угол в координаты, чтобы наклонить градус // градиент должен быть перпендикулярен верхнему краю дуги вар град = ctx.createLinearGradient(0, 0, 0, 100); grad.addColorStop(0, "rgba(0,0,0,0)"); grad.addColorStop(1, "rgba(0,0,0,0.8)"); ctx.fillStyle = град; ctx.fill(); })
(Чтобы никто не тратил зря время: я специально не хочу использовать context.rotate() в этом случае)
