Комментарий: я не буду пробовать технологию, которую Microsoft не очень поддерживает. Когда Microsoft говорит, что это поддержат это, я попробую. Может быть, я привык следовать маршруту Microsoft, но это довольно глупо думать об этом.
MVC - это хорошая вещь. Почему вы не узнаете это, когда вы входите в отрасль? Вы должны подождать, пока ASP.NET MVC выйдет, прежде чем вы узнаете об этом; Орм - это хорошая вещь, почему вы должны ждать, пока EF не выйдет, прежде чем вы узнаете об этом; HTML5 - это хорошая вещь, почему вам нужно ждать, пока IE9 выйдет, прежде чем вы узнаете об этом? ......-Я думаю, что должен избавиться от этой плохой привычки.
Нет больше чепухи.
Требования: подражайте функции рисования точек якоря для изображений в DreamWeaver и генерировать значения координат в коде HTML.
Технический анализ: Интуиция говорит мне, что HTML5 Canvas компетентен.
Поскольку я никогда не участвовал в холсте в веществе и видел только демонстрации, разработанные другими, используя Canvas, мне пришлось поделиться учебником по холсту HTML5. Откройте для себя следующую ссылку:
После прочтения документа напишите код:
Анализ кода:
1.1 HTML: используйте изображение в качестве основания и поместите его на нее для рисования изображений
1.2 CSS: По крайней мере, вам нужно разместить правильное положение, и прозрачное место должно быть прозрачным.
1.3 JavaScript: Mousedown, Mousemove, MouseUp
<div>
<img src = "http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg"/>
<Canvas>
<p> Некоторая информация, чтобы сообщить людям, чьи Broswer не поддерживает html5 </p>
</canvas>
</div>
Опытные студенты могут знать, что это суждено быть трагедией, когда они смотрят на код HTML5. Когда в холсте есть элемент IMG, холст будет непрозрачным, несмотря ни на что. Я забыл, смогу ли я что -то нарисовать на холсте, что не должно работать. Кажется, что этот элемент холста обладает чистотой и не желает быть с другими низкоуровневыми элементами. Даже если я хочу согласиться на второе лучшее, это не будет работать как фоновый элемент Cantainer. Я чувствую, что этот холст не может быть прозрачным для других элементов. Таким образом, приведенный выше код на самом деле не тот код ...
Итак, как мы можем достичь аналогичных эффектов в слоях в Photoshop? То есть получить еще несколько элементов холста, заменить приведенный выше IMG на холст, а затем нарисовать IMG на этом холсте, чтобы холст был прозрачным для холста. Увы ... Код выглядит следующим образом:
<div>
<Canvas> </canvas>
<Canvas>
<p> Некоторая информация, чтобы сообщить людям, чьи Broswer не поддерживает html5 </p>
</canvas>
</div>
Ну, HTML сделан, и следующий шаг - нарисовать на холсте. С помощью JavaScript эта задача очень проста.
window.addeventlistener ('load', function () {
// Получить элемент холста.
var elem = document.getElementbyId ('bg');
if (! elem ||! elem.getContext) {
возвращаться;
}
// Получить холст 2D контекста.
var context = elem.getContext ('2d');
if (! context ||! context.drawimage) {
возвращаться;
}
// Создать новое изображение.
var img = новое изображение ();
// как только он загружен нарисовать изображение на холсте.
img.addeventlistener ('load', function () {
// Оригинальное разрешение: x, y.
context.drawimage (это, 0, 0);
// теперь измените размер изображения: x, y, w, h.
context.drawimage (это, 160, 0, 120, 70);
// Размещение и изменение размера изображение: SX, SY, SW, SH, DX, DY, DW, DH.
context.drawimage (это, 8, 20, 140, 50, 0, 150, 350, 70);
}, ЛОЖЬ);
img.src = 'http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg';
}, ЛОЖЬ);
// Обратите внимание, что код, взятый непосредственно в документе, необходим для событий Opera и IE9 Onload, в противном случае изображение будет пустым, конечно, это не будет в случае Chrome.
Продолжение следует...
Оригинальный адрес