Такая же проблема, видеокарта Radeon HD6870 1gb, только в играх от бипезды: Скайрим, фолауты третьи, иногда пропадает сигнал с видеокарты, как-будто монитор в спящий режим переходит и не реагирует ни на какие действия. Драйвера новые, температура в норме.
P.S. Извините, не посмотрел, где лежит тема. rtytyrtyr
Сообщение отредактировал Revolver_45 - Воскресенье, 20 Ноября 2011, 13:48
ммм, как я понял уроки будут посвященные только Канвасу????
Ну, в общем-то нет. Я попытаюсь затронуть более широкий спектр возможностей HTML5, при этом рассматривая его в первую очередь как средство разработки интерактивных приложений и игр, а не как язык разметки веб-старничек. Собственно мои уроки и будут направлены на написание несложных игрушек в конечном итоге, обходя стороной такие моменты как структура верстки, форматирование текста, создание форм и т.п. Кроме канвы рассмотрим и другие элементы: для мультимедиа - видео и аудио, а также их взаимодействие, хранилище данных, автономную работу, фоновые вычисления и сокеты. rtytyrtyr
Элемент <canvas> - одна из самых объёмных и наиболее интересных частей спецификации HTML5. Он представляет из себя интерфейс прикладного программирования для двумерного рисования. Проще говоря, элемент <canvas> - это холст на котором можно рисовать. Представить базовую функциональность canvas можно на примере стандартного графического редактора MS Paint. В действительности пейнт запросто можно полностью воспроизвести при помощи элемента <canvas>. По всему интернету уже относительно давно появляются приложения, грозящие в полнофункциональные программы векторной графики, работающие на самых разных устройствах. Также Canvas применяется для создания массы различных других приложений, таких как: интерактивные элементы сайтов, графические инструменты, полноценные приложения и, что для вас скорее всего самое интересное это игры и симуляторы.
Первый шаг
По традиции первым шагом в изучении любого языка программирования и тому подобного является написание элементарной программы "Hello world!", выводящей на экран данную фразу. Мы же начнём с того, что сначала добавим элемент <canvas> на страницу. Для этого нужно создать текстовый файл в любом текстовом редакторе, назовите его, к примеру, "canvas" и сохраните с расширением .htm Затем напечатайте в этот документ следующий код:
Первая строчка определяет, что документ соответствует стандарту HTML5 Вторая строчка - это просто заголовок документа, в тегах может содержаться произвольный текст Ну и третья строчка собственно и есть тег холста. По умолчанию холст невидим, а его размеры составляют примерно 300 пикселов в ширину и 150 пикселов в высоту. Некоторые, наверное, сейчас выпучили глаза и думают: "А ГДЕ ЖЕ САМЫЕ ПЕРВОСТЕПЕННЫЕ ТЕГИ <HTML>, <HEAD> и <BODY>????77". Дело в том, что данные теги в стандарте HTML5 вовсе необязательны, и без них документ спокойно проходит валидацию. Поэтому, вы можете отказаться от их использования.
Теперь, когда холст добавлен на экран, нам потребуется JavaScript. Допечатайте в свой документ следующий код:
Code
<SCRIPT> var canvas = document.querySelector("canvas"); var holst = canvas.getContext("2d"); canvas.width=800; canvas.height=600; </SCRIPT>
В первой строчке мы записываем элемент canvas в переменную, чтобы в дальнейшем через неё обращаться к нему. Во второй строке мы добавили к нашему холсту двумерный контекст и получили полный доступ ко всей функциональности API и можем рисовать в своё удовольствие. В третьей и четвёртой строках мы указали размеры элемента canvas на 800 писелов в ширину и 600 пикселов в ширину. Вы можете в любой момент вызвать применить данные методы, чтобы изменить размеры холста. Так же вы можете задавать эти параменты и в самом теге <CANVAS width="800" height="600"></CANVAS>. Или, если вы хотите, чтобы холст подстраивался под разрешение экрана, то можете, вместо конкретных значений указать canvas.width=screen.width и canvas.height=screen.height соответственно.
Итак, элемент хоста полностью добавлен на страницу и к нему получен полный доступ, а это значит, что мы теперь можем рисовать на нём всё что угодно в своё удовольствие. Ну и по традиции, как было запланированно давайте на него выведем текст "Hello world!". Для этого можно использовать функцию fillText(text,x,y), имеющую три параметра - сам текст в кавычках и собственно координаты x и y. Допишите в свой скрипт следующую строчку:
Code
holst.fillText('Hello world!',10,10);
Также вы можете задать цвет рисования, используя метод fillStyle и присвоив ему значение цвета. Это следует делать перед функцией рисования. Добавьте следующую строчку перед рисования текста, чтобы сделать его красным.
Code
holst.fillStyle='red';
Значение цвета можно указывать как словами "red", "blue", "green" и т.п., так и в системе "rgb(255,0,0)" или шестнадцатиричном виде "#FF0000", главное не забывать ставить кавычки. По умолчанию canvas рисует чёрным цветом.
Теперь вы можете запустить документ в браузере и проверить результат, и если вы видите заветную фразу, то я спешу вас поздравить, вы только что совершили свой первый робкий шаг в изучении HTML5 Canvas! P.S. Если у вас что-то не получилось, сверьте ваш код с моим и найдите ошибки.
Первый шаг на пути к двери, открывающей обширные просторы возможностей HTML5 Canvas вы уже сделали, уверенным он получился или нет пока неважно, двигаемся дальше. В этой части урока мы научимся с вами рисовать на холсте различные геометрические фигуры и начнём с самого простого - рисования прямоугольников. Существует два основных метода рисования прямоугольника:
.fillRect(x, y, w, h);
.strokeRect(x, y, w, h);
Оба этих метода принимают четыре аргумента: x-позиция левого верхнего угла по гонризонтали, y-позиция левого верхнего угла по вертикали, w-ширина прямоугольника в пикселах, h-высота прямоугольника в пикселах Различия этих методов заключаются только в том, что первый рисует прямоугольник полностью заливая его цветом, а второй рисует только контур прямоугольника. Добавьте на холст прямоугольник закрашенный жёлтым цветом:
Таким же образом можно закрасить весь холст в определённый цвет, то есть задать ему фон, для этого перед всеми выше стоящими в коде функциями рисования добавьте на холст прямоугольник соответсвующий размеру холста. Сейчас фон у вас прозрачный (по умолчанию), сделайте его чёрным:
Обратите внимание, что для всех stroke-методов (контуров) рисования стиль указывается методом .strokeStyle, для .fill-методов (c заливкой) соответственно .fillStyle.
Также можно задавать ширину контура в пикселах. Чтобы сделать контур последнего прямоугольника пожирнее, вставьте следующую строчку перед строкой его рисования:
Code
holst.lineWidth=10;
И наконец, если вы укажете одинаковые аргументы в методах рисования первого и второго прямоугольников, то есть укажете одни и те же координаты, а также размеры, то вы получите сплошной прямоугольник с заливкой и обведённый контуром, как бы очевидно это не было
Теперь перейдём к следующему более сложному, но и более гибкому методу рисования. Этот метод представляет собой рисование путей или произвольное рисование по координатам, вам будет легче разобраться в этом, если вы представите, как-будто устанавливаете карандаш на холст и от начальной точки последовательно проводите линии к указанным точкам. таким образом вы можете рисовать любые произвольные фигуры различной формы. Для этого в вашем распоряжении есть целый набор, состоящий из нескольких методов:
.beginPath(); - объявляет начало рисования пути, не принимает никаких аргументов.
.moveTo(x,y); - указывает точку с координатами x и y, с которой вы хотите начать рисование.
.lineTo(x,y); - рисует линию к заданной точке в координатах x и y.
.closePath(); - объявляет конец рисования пути и рисует линию от последней точки к начальной, не принимает никаких аргументов.
После рисования пути вам нужно вывести его на холст, воспользовавшись уже знакомыми методами .fill() или .stroke(), в первом случае внутрення область пути будет закрашена, во втором будет нарисован только контур, также вы можете совмещать эти методы. Не забывайте, что вы также можете управлять такими свойствами рисования, как цвет заливки, цвет контура, ширина линии и т.д.
Таким образом вы можете рисовать любые другие фигуры, задавая произвольное количество точек в координатах. Рисование более сложных путей с использованием различных дуг, окружностей, кривых мы возможно разберём в следующий раз.
Заключение
На этом мы заканчиваем первое знакомство с HTML5 Canvas. В этом уроке, мы научились добавлять элемент canvas на страницу, изменять его параметры, познакомились с основными функциями рисования, а также научились управлять стилями рисования. В следующий раз мы углубимся в изучение ещё немного дальше, и я покажу вам как можно обрабатывать изображения на холсте, а так же мы сделаем первую анимацию.
А пока советую вам не останавливаться на прочтении этого урока и немного уже самостоятельно потренироваться с рисованием, используя знания, полученные из этого урока. Чтобы вам помочь, я предоставляю ниже краткий справочник, по изученным сегодня методам:
Quote
.querySelector("canvas") - идентифицирует элемент холста .getContext("2d") - добавляет к выбранному элементу холста двумерный контекст .width=x - указывает ширину элемента в пикселах .height=x - указывает высоты элемента холста в пикселах .fill() - метод рисования с заливкой .stroke() - метод рисования границы .fillStyle="цвет" - указывает цвет заливки .strokeStyle="цвет" - указывает цвет границы .lineWidth=x - указывает ширину границы в пикселах .fillRect(x, y, w, h) - рисует прямоугольник с координатами левого угла в x и y, шириной w, высотой h и заливает его цветом .strokeRect(x, y, w, h) - аналогично предыдущему методу, но рисует границу прямоугольника без заливки .beginPath() - объявляет начало рисования пути .moveTo(x, y) - объявляет начальную точку рисования пути в координатах x и y .lineTo(x, y) - рисует линию от текущей точки к точке с координатами x и y .closePath() - объявляет конец рисования пути и рисует линию от последней точки к начальной
Больше всех Дезмонд нравился, меня сильно захватывали приключения, творящиеся с ним, да и характер этого персонажа мне нравится, ну а на втором плане - Чарли и Хёрли. rtytyrtyr
Duskly, Нет. Я то знаю для чего данный тег служит. Это объявление типа документа, нужное для того, чтобы сообщить браузеру по какому из стандартов HTML ему обрабатывать страницу. Ну или проще сказать, что так ты указываешь какую версию HTML или xHTML ты используешь. В данной статье автор почему-то придерживается давно устаревшей спецификации версии 3.2 В новейшем стандарте HTML 5 этот тег выглядит проще <!DOCTYPE html> и имеет только такой вид, без всяких там строгих или расширенных типов rtytyrtyr
Сообщение отредактировал Revolver_45 - Понедельник, 14 Ноября 2011, 21:47
Бренд, то он конечно бренд, но это бренд двух товарищей Ли и Лу, трудящихся за старым деревянным станком по принципу "один тянет, другой крутит", а не принадлежайший честной Китайской компании, заслуживающей доверия. rtytyrtyr
Сообщение отредактировал Revolver_45 - Понедельник, 14 Ноября 2011, 21:23
У меня не вызывают доверия китайские поделки от безымянных фирм. Заявленные характеристики скорее всего не будут соответствовать действительности, по крайней мере это касается HDMI. Если бы ещё это была оригинальная разработка какой-нибудь крупной известной китайской фирмы, к примеру HTC, BenQ, Huawei, ZTE, то другое дело, а так это та же самая контора Дядюшки Хо, которая выпускает 1.3 мегаписксельные мыльницы с надписью "SONY!!11" "MADE IN JAPAN!!!1" 1080p!!!111 32mpx!!!1111 да ещё и в коробку ложат фальшивый чек с указанной стоимостью в овер 20 000, чтобы продавать через цыган на базарах лохам якобы крутую вещь с якобы невероятной скидкой. rtytyrtyr
Сообщение отредактировал Revolver_45 - Воскресенье, 13 Ноября 2011, 15:15
