| import streamlit as st |
| import streamlit.components.v1 as components |
|
|
| st.title("Градиент радуги") |
|
|
| |
| gradient_html = """ |
| <canvas id="rainbowCanvas" width="200" height="600"></canvas> |
| <script> |
| const canvas = document.getElementById('rainbowCanvas'); |
| const ctx = canvas.getContext('2d'); |
| |
| // Создаем линейный градиент |
| const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); |
| gradient.addColorStop(0, 'violet'); // Фиолетовый |
| gradient.addColorStop(1/6, 'blue'); // Синий |
| gradient.addColorStop(2/6, 'green'); // Зеленый |
| gradient.addColorStop(3/6, 'yellow'); // Желтый |
| gradient.addColorStop(4/6, 'orange'); // Оранжевый |
| gradient.addColorStop(5/6, 'red'); // Красный |
| gradient.addColorStop(1, 'violet'); // Возврат к фиолетовому для плавности |
| |
| // Заполнение прямоугольника градиентом |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| </script> |
| """ |
|
|
| |
| components.html(gradient_html, height=600) |
|
|