Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.11.2018, 18:01   #1
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию Градиент в Javascript: Пробую сделать радугу, но в итоге выводит не радугу, а другие цвета, почему?

Пробую сделать радугу, но в итоге выводит не радугу, а другие цвета, почему?

Код:
<!DOCTYPE html>
<html>
  <head>
    <title>Рисование прямоугольников</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>
    <script>
      canvas = O('mycanvas')
      context = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
//Градиент сверху вниз 
//gradient = context.createLinearGradient(0, 0, 0, 270)
//Градиент слева направа
gradient = context.createLinearGradient(0, 0, 460, 0)
gradient.addColorStop(0.00, 'red')
gradient.addColorStop(0.14, 'orange')
gradient.addColorStop(0.28, 'yellow')
gradient.addColorStop(0.42, 'green')
gradient.addColorStop(0.56, 'blue')
gradient.addColorStop(0.70, 'indigo')
gradient.addColorStop(0.84, 'violet')
context.fillStyle = gradient
context.fillRect(285, 20, 135, 200)
    </script>
  </body>
</html>
Вместо радуги градиент получается как на фото ниже а должна быть радуга, делаю градиент на светло-снием фоне холста.
Изображения
Тип файла: jpg Снимок.JPG (14.9 Кб, 78 просмотров)
usa-1450 вне форума Ответить с цитированием
Старый 20.11.2018, 18:09   #2
p51x
Старожил
 
Регистрация: 15.02.2010
Сообщений: 15,695
По умолчанию

Сделайте фон белым или смешивание настройте.
p51x вне форума Ответить с цитированием
Старый 20.11.2018, 20:18   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Потому что ты рисуешь только тот кусок, который и видишь.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 20.11.2018, 20:41   #4
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Вроде с этим разобрался, пробую сделать радиальный градиент, даже попробовал пример на сайте http://dunaev.far.ru/examples/canv4.htm, но почему ничего не отображает.

Код:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круг</title>
 </head>
 <body>
<canvas id="canvas" width="1000" height="1000" style="border:3px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

function initdraw(){ //обработчик события onload элемента <body>
  x=0;
  dx=2;
  k=1;
  ctx = document.getElementById('canvas').getContext('2d');
  ctx.fillStyle="rgba(245,247,184,1)";//цвет заливки
  ctx.fillRect(0,0,430,120);//заливаем
  
  setInterval("draw()",100) // периодически вызываем draw()
}

function draw() {
  x=x+k*dx;
  if (x>300) k=-1;
  if (x<0) k=1;
  ctx.fillStyle="rgba(245,247,184,1)";//цвет заливки
  ctx.fillRect(0,0,120,120);
  // создаем радиальный градиент:
 var radgrad = ctx.createRadialGradient(50,55,10,57,60,30);
  radgrad.addColorStop(0, '#FF5F98');
  radgrad.addColorStop(0.8, '#FF0188');
  radgrad.addColorStop(1, 'rgba(255,1,80,0)');

  // рисуем шар:
  ctx.fillStyle = radgrad;
  ctx.fillRect(26,29,61,61);
  ctx.translate(k*dx,5*Math.cos(20*Math.PI*x/400)); // перемещаем холст
}
</script>
</body>
</html>
Прост пустой экран, почему не выводит шары код?
usa-1450 вне форума Ответить с цитированием
Старый 20.11.2018, 21:51   #5
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Вы пропустили важное замечание:

Цитата:
Сообщение от usa-1450 Посмотреть сообщение
Код:
function initdraw(){ //обработчик события onload элемента <body>
попробуйте в вашем примере сделать так:
Код:
<body onload="initdraw()">
.....
Serge_Bliznykov вне форума Ответить с цитированием
Старый 22.11.2018, 21:12   #6
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Решил попробовать градиент текста.. Вроде текст выводит, но буквы пустые с окантовкой, не залиты градиентом. Как их залить градиентом чтобы внутри букв не была пустота?

Код:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<style>
  .teststyle{
      padding: 5px;
	  box-shadow: 20px 20px 20px gray;
	  border:8px dashed brown;
	  border-radius: 50px; 
  }
</style>
        <title>Canvas в HTML5</title>
    </head>
    <body onload='draw()'>
<canvas class='teststyle' id='canvas' width='800' height='200'></canvas>

        <script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);

ctx.font="80px bold Verdana";

// Создаем градиент
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// Заполним градиентом
ctx.strokeStyle=gradient;

//Отступ слева, отступ сверху
ctx.strokeText("Добро пожаловать!",10,150);
  
        </script>
    </body>
</html>
Изображения
Тип файла: jpg Снимок.JPG (39.4 Кб, 141 просмотров)
usa-1450 вне форума Ответить с цитированием
Старый 22.11.2018, 21:21   #7
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

погуглил.
гугл говорит, что для вывода заполненного текста есть fillText():
Код:
// Заполним градиентом
ctx.fillStyle=gradient;

//Отступ слева, отступ сверху
ctx.fillText("Добро пожаловать!",10,150);
Serge_Bliznykov вне форума Ответить с цитированием
Старый 22.11.2018, 21:27   #8
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Он не срабатывает...Я пробовал так..

Код:
ctx.fillText("Добро пожаловать!",10,150);
Просто чисто черный и все, я именно хотел тремя цветами чтобы было как здесь
Код:
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
и при этом сам текст был заполненный

ОКазывается нужно использовать метод fillStyle с методом fillText и тогда заработало.

Код:
// Заполним градиентом
ctx.fillStyle=gradient;

//Отступ слева, отступ сверху
ctx.fillText("Добро пожаловать!",10,150);

Последний раз редактировалось Вадим Мошев; 25.11.2018 в 17:30.
usa-1450 вне форума Ответить с цитированием
Старый 22.11.2018, 23:15   #9
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от usa-1450 Посмотреть сообщение
ОКазывается нужно использовать метод fillStyle с методом fillText и тогда заработало.
А Вы мой пост не видели?


Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
погуглил.
гугл говорит, что для вывода заполненного текста есть fillText():


Код:
// Заполним градиентом
ctx.fillStyle=gradient;

//Отступ слева, отступ сверху
ctx.fillText("Добро пожаловать!",10,150);
Или подумали, что я две строчки кода просто так привёл, да?
Serge_Bliznykov вне форума Ответить с цитированием
Старый 24.11.2018, 18:40   #10
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Есть текст Hello заполненный градиентом (в роли градиента - картинка). Нужно сделать обводку этого текста Hello красным цветом.

Тень вроде работает нормально, градиент с картинки заполняется, а вот обводки не получается сделать никак.. Есть функция которая делает обводку strokeStyle
Но она не работает и обводка не делается. В чем может быть проблема?

Я закоментировал эту строку которая должна сделать обводку, если откоментировать выпадает ошибка
Код:
Uncaught TypeError: context.strokeStyle is not a function
Вот весь код.

Код:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
    </head>
    <body>

<canvas id='test' width='1250px' height='600px'></canvas>

        <script>
image = new Image()

var image = document.createElement('img'),
    context = document.getElementById('test').getContext('2d');	

image.onload = function() {
    context.fillStyle = context.createPattern(image, 'no-repeat');
	
	context.font = '200px Verdana'
//Окантовка для букв 
    context.fillText('Hello', 0, 300);
	
	
    //Окантовка для букв
    context.strokeText('Hello', 0, 300);
	
};

image.src = '1.jpg';
	  //Сдвиг тени право
  context.shadowOffsetX = 50
  //Сдвиг тени вниз
  context.shadowOffsetY = 100
  //размытость
  context.shadowBlur = 15
  context.shadowColor = 'brown'

  //context.strokeStyle('red');
 
        </script>
    </body>
</html>
Изображения
Тип файла: jpg Снимок.JPG (27.0 Кб, 60 просмотров)
usa-1450 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пробую сделать плеер на базе библиотек VLC akf63 Visual C++ 0 06.05.2016 09:51
CSS Как сделать двусторонний градиент-фон hopeman HTML и CSS 6 25.04.2012 10:48
комп. графика и градиент цвета maccam Visual C++ 1 12.04.2012 10:21
Прозрачный градиент - Фон не просто прозрачный, есть градиент - к верху он светлеет DrStrangeLove HTML и CSS 3 26.05.2011 00:44
Не выводит javascript misher JavaScript, Ajax 2 12.01.2011 17:47