20.11.2018, 17:53
|
Интересующийся
|
|
Регистрация: 20.09.2017
Сообщений: 22
|
|
Градиент в 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> |
Вместо радуги градиент получается как на фото ниже а должна быть радуга, делаю градиент на светло-снием фоне холста.
|
|
20.11.2018, 20:31
|
Интересующийся
|
|
Регистрация: 20.09.2017
Сообщений: 22
|
|
Вроде с этим разобрался, пробую сделать радиальный градиент, даже попробовал пример на сайте 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> |
Прост пустой экран, почему не выводит шары код?
|
|
22.11.2018, 21:02
|
Интересующийся
|
|
Регистрация: 20.09.2017
Сообщений: 22
|
|
Все работает, в body событие Onload нужно было указать.
Решил попробовать градиент текста.. Вроде текст выводит, но буквы пустые с окантовкой, не залиты градиентом. Как их залить градиентом чтобы внутри букв не была пустота?
Код:
|
<!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> |
|
|
22.11.2018, 21:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
|
22.11.2018, 21:58
|
Интересующийся
|
|
Регистрация: 20.09.2017
Сообщений: 22
|
|
ОКазывается нужно использовать метод fillStyle с методом fillText и тогда заработало.
Код:
|
// Заполним градиентом
ctx.fillStyle=gradient;
//Отступ слева, отступ сверху
ctx.fillText("Добро пожаловать!",10,150); |
Последний раз редактировалось super-html, 22.11.2018 в 22:09.
|
|
22.11.2018, 22:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
super-html,
|
|
24.11.2018, 18:32
|
Интересующийся
|
|
Регистрация: 20.09.2017
Сообщений: 22
|
|
Есть текст 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> |
|
|
24.11.2018, 20:39
|
Интересующийся
|
|
Регистрация: 20.09.2017
Сообщений: 22
|
|
Вот так сработало, только вот непонятно как сделать окантовку к примеру штрихпунтирной линией.
Код:
|
<!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.strokeStyle='red'
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');
// ctx.fillStyle = 'lightblue';
//Заливаем фигуру голубым цветом
//ctx.fillRect(10, 10, 50, 50);
//Делаем окантовку красным цветом
//ctx.strokeStyle='red'
//ctx.strokeRect(10, 10, 50, 50);
</script>
</body>
</html> |
Последний раз редактировалось super-html, 24.11.2018 в 20:54.
|
|
24.11.2018, 20:59
|
Интересующийся
|
|
Регистрация: 20.09.2017
Сообщений: 22
|
|
Наконец-то нашел в документации..
Нужны всего 2 строки:
Код:
|
context.beginPath()
context.setLineDash([10,10]) |
|
|
25.11.2018, 00:38
|
Интересующийся
|
|
Регистрация: 20.09.2017
Сообщений: 22
|
|
Оформил все в функцию, пробую испытать метод который копирует с холста getImageData и вставить методом putImageData, но почему то ничего не происходит, копия вторая не делается.
Код:
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas в HTML5</title>
</head>
<body onload='myImage()'>
<button onclick="copy()">Copy</button>
<canvas id='test' width='1000px' height='1000px'></canvas>
<script>
function myImage(){
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.strokeStyle='red'
context.beginPath()
context.lineWidth=5;
context.setLineDash([5,5])
context.font = '200px Verdana'
//Заполнение для букв
context.fillText('Hello', 0, 200);
//Окантовка для букв
context.strokeText('Hello', 0, 200);
};
image.src = '1.jpg';
//Сдвиг тени право
context.shadowOffsetX = 50
//Сдвиг тени вниз
context.shadowOffsetY = 100
//размытость
context.shadowBlur = 15
context.shadowColor = 'brown'
}
function copy()
{
var imgData=context.getImageData(10,10,200,200);
context.putImageData(imgData,800,800);
}
</script>
</body>
</html> |
При нажатии на кнопку должна сделаться копия.
|
|
|
|