Как использовать изображение .png в качестве фона в холсте html5?

Question

Я хотел бы использовать изображение для фона в элементе canvas, предоставленном HTML5.

Дело в том, что я не хочу, чтобы чертеж изменял это изображение, я просто хочу, чтобы он использовался в качестве справочного руководства или руководства для пользователя.

Например: если я рисую фоновое изображение на холсте, то добавляю несколько линий и случайных рисунков, и когда я использую инструмент стирания, он стирает и мои линии, и фоновое изображение.

Как я могу предотвратить это?

Thanx.

Answer 1

Вы можете использовать CSS, чтобы расположить холст над элементом <img> с фоном

. Это похоже на обычную уловку для создания многослойной анимации: просто создайте отдельный элемент <canvas> для каждого слоя ипоместите один поверх другого.

неотрисованные пиксели <canvas> являются прозрачными, а не белыми.

Answer 2

Вы можете просто использовать CSS.

Допустим, у вас есть холст, такой как:

<canvas id="Canvas" width="385px" height="330px"></canvas>

Вы можете использовать CSS, чтобы добавить фоновое изображение:

#Canvas{background:url(Grid.png)}