Как canvas сделать фоном
Перейти к содержимому

Как canvas сделать фоном

  • автор:

Как сделать canvas фоном веб-страницы

Author24 — интернет-сервис помощи студентам

Доброго дня!
Возникла такая проблема: создана веб-страница с помощью стандартных label, button, textarea и тд, а также создан canvas на который поместили картинки и подразумевали что эта картинка на canvas будет фоном для данной html-страницы с label, button, textarea и тд, но при добавлении данного canvas вместе со script и всем содержимым в html-файл (и в раздел body, и head, и сделать canvas в качестве body=background — без результата) почему-то часть страницы занимает сами, непосредственно, label, button, textarea и тд а ниже (или выше, смотря как указать) расположена моя картинка с фоном (которая должна быть фоном, коим не является, а присутствует на странице где-то самостоятельно).
как можно решить такую проблему?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?
Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?

Сделать картинку фоном страницы
Как сделать картинку фоном страницы, что-бы на ней создавались формы, тексты и т.д.

Как сделать, чтобы android не кэшировал веб страницы?
Пользователь нажимает на кнопку, открывается браузер (или WebView), переходит на мой сайт (страница.

Как сделать canvas на заднем плане относительно всех других canvas-ов (слой с кругами)
package com.ua.drawfigures; import android.graphics.Bitmap; import android.graphics.Canvas;.

Сделать 2 треугольника с блока и добавить линию по диагонали или как сделать адаптивный background с фоном
Товарищи знатоки как сверстать такой блок: В конечном итоге должно получится пока что сделал.

Как сделать canvas фоном?

Вообще работает, но ссылки перекрываются. Как сделать так, чтоб canvas был fixed и фоном, но при этом внизу? z-index он игнорирует.

Перемещено mono из talks

Deleted
19.12.17 14:32:44 MSK

Если нужно просто рисовать на canvas, а полученное изображение статично, то можно отрендерить off-screen с помощью canvas.toDataURL() , а затем положить изображение в фон.

Sadler ★★★
( 19.12.17 14:49:49 MSK )
Ответ на: комментарий от Sadler 19.12.17 14:49:49 MSK

Не, это типа валящиеся снежинки. Вот кусок:

 window.onload = function()< var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; var mp = 40; var particles = []; for(var i = 0; i < mp; i++) < particles.push(< x: Math.random()*W, y: Math.random()*H, r: Math.random()*4+1, d: Math.random()*mp >) > function draw() < ctx.clearRect(0, 0, W, H); ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; ctx.beginPath(); for(var i = 0; i < mp; i++) < var p = particles[i]; ctx.moveTo(p.x, p.y); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); >ctx.fill(); update(); > var angle = 0; function update() < angle += 0.01; for(var i = 0; i < mp; i++) < var p = particles[i]; p.y += Math.cos(angle+p.d) + 1 + p.r/2; p.x += Math.sin(angle) * 2; if(p.x >W+5 || p.x < -5 || p.y >H) < if(i%3 >0) < particles[i] = ; > else < if(Math.sin(angle) >0) < particles[i] = ; > else < particles[i] = ; > > > > > setInterval(draw, 33); >  

А потом идёт один сплошной body.

Свойство fillStyle

Свойство fillStyle задает цвет заливки фигуры при рисовании на canvas. Значением свойства служат любые CSS единицы для цвета.

Синтаксис

контекст.fillStyle = цвет;

Пример

Давайте нарисуем квадрат с помощью rect и зальем его красным цветом:

let canvas = document.querySelector(‘#canvas’); let ctx = canvas.getContext(‘2d’); ctx.rect(50, 50, 100, 100); ctx.fillStyle = ‘red’; ctx.fill();

Смотрите также

  • метод strokeStyle ,
    который устанавливает цвет линии

Как canvas сделать фоном

Вместо конкретного цвета для заливки фигур, например, прямоугольников, мы можем использовать изображения. Для этого у контекста элемент canvas имеется функция createPattern() , которая принимает два параметра: изображение, которое будет использоваться в качестве фона, и принцип повторения изображения. Последний параметр играет роль в том случае, если размер изображения у нас меньше, чем размер фигуры на canvas. Этот параметр может принимать следующие значения:

  • repeat : изображение повторяется для заполнения всего пространства фигуры
  • repeat-x : изображение повторяется только по горизонтали
  • repeat-y : изображение повторяется только по вертикали
  • no-repeat : изображение не повторяется

Нарисуем прямоугольник и выведем в нем изображение:

    METANIT.COM      

Чтобы использовать изображение, нам надо создать элемент Image и установить источник изображения — локальный файл или ресурс в сети:

const img = new Image(); img.src = "forest.png";

В данном случае предполагается, что в одной папке с файлом html у меня находится файл изображения forest.png . Однако загрузка изображения может занять некоторое время, особенно если файл изображения берется из сети интернет. Поэтому, чтобы быть уверенными, что изображение уже загрузилось, все действия по его использованию производятся в методе img.onload , который вызывается при завершении загрузки изображения:

img.onload = function() < const pattern = context.createPattern(img, "repeat"); context.fillStyle = pattern; context.fillRect(10, 10, 200, 200); context.strokeRect(10, 10, 200, 200); >;

Метод createPattern() возвращает объект, который устанавливается в качестве стиля заполнения фигуры: context.fillStyle = pattern; . Отрисовка прямоугольника остается той же.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *