html5 canvas draw line/s over a css background image

У меня есть html-файл, который имеет холст и устанавливает фон в изображение 800x800. Кто-нибудь знает, как я могу рисовать линии поверх изображения? так что даже когда я масштабирую/уменьшаю масштаб, то же самое (линии, накладывающиеся на изображение)?html5 canvas draw line/s over a css background image

вот мой код до сих пор

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Project 1</title> 
<style type="text/css" media="screen"> 
canvas { background:url(image.png) } 
</style> 
</head> 
<body> 

<canvas id="canvas" width="800px" height="800px"></canvas> 


</body></html>

источник

2012-01-10 user859348

увеличить/уменьшить как? –

просто стандартное масштабирование веб-браузера, или если оно перешло на мобильное устройство .. в веб-браузере встроены средства управления увеличением. В любом случае, это наименьшее из моих забот прямо сейчас – user859348

Что вы рисуете последний появится на вершине.

Для вашей проблемы изображения вы можете использовать DrawImage() (в API-интерфейсе Canvas) Пример здесь: https://developer.mozilla.org/en/Canvas_tutorial/Using_images

Так что на каждом розыгрыше() метод вы звоните первый розыгрыш ваших фотографий, то розыгрыш вашей линий.

Personnaly для большого проекта Я использую метод getzindex() для каждого объекта, который нужно рисовать. Этот метод возвращает число, затем я сортирую эти числа, и я вызываю правильный метод рисования каждого объекта в правильном порядке (надеюсь, что это понятно)

источник

2012-01-10 16:56:59 Tim

dunno о части в последнем абзаце, но с использованием drawImage вместо этого css-background - это правильный подход, пока изображение подано из одного и того же домена - иначе могут возникнуть некоторые исключения безопасности (см. «Скрипт с крестом»). –

html5 canvas draw line/s over a css background image

ответ

Смежные вопросы