|
|
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) |
|
|
|