Canvas является частью HTML5 и позволяет языкам сценариев динамически отображать изображения. Canvas определяет область. Ширина и высота области могут определяться атрибутами HTML. Код JavaScript может получать доступ к области и выполнять динамическую визуализацию на веб-странице с помощью полного набора функций рисования (API).
2. Что может CanvasИгры. Нет сомнений в том, что игры играют важную роль в области HTML5. HTML5 более трехмерен и более сложен, чем Flash, с точки зрения отображения изображений в Интернете.
Создание диаграмм. Люди часто игнорируют создание диаграмм, но общение и сотрудничество внутри предприятия или между предприятиями неотделимы от диаграмм. Некоторые разработчики теперь используют HTML/CSS для создания значков. Конечно, использование SVG (масштабируемой векторной графики) для создания диаграмм также является очень хорошим способом.
Дизайн шрифтов. Пользовательский рендеринг шрифтов будет полностью основан на Интернете и реализован с использованием технологии HTML5.
Графический редактор: графический редактор может быть на 100% веб-интерфейсом.
Другой контент, который можно встроить в веб-сайт: графика, аудио, видео и многие другие элементы, может быть лучше интегрирован с Интернетом и не требует каких-либо плагинов.
3. Базовое использование Canvas1. При использовании <canvas> необходимо сначала установить его атрибуты ширины и высоты и указать размер области рисования. Если вы укажете только ширину и высоту, не добавляя стили и не рисуя изображения, элемент не будет виден на странице. .
<canvas id='draw' width='200px' height='200px'></canvas>
2. Чтобы нарисовать изображение, нам сначала нужно получить холст и вызвать метод getContext(), а затем передать имя контекста (2D/3D). В 2D есть две основные операции рисования | fill (fillStyle) | StrokeStyle. ) | Значение по умолчанию для этих двух свойств — #000.
var draw = document.getElementById('draw'); //Подтверждаем, поддерживает ли браузер элемент <canvas> if(draw.getContext){ var context = draw.getContext('2d'); //Рисуем красную рамку the context context.strokeStyle = '#f00'; //Цвет внутренней заполненной прерии context.fillStyle = '#0f0';}3. Используйте метод toDataURL() для экспорта изображения, нарисованного на элементе <canvas>.
var draw = document.getElementById('draw');if(draw.getContext){ //Отображаем изображение, toDataURL() получает строку в формате base64 string var drawURL = draw.toDataURL('image/png') var image; = document.createElement('img'); image.src = drawURL; document.body.appendChild(изображение);4. Существует три основных метода рисования прямоугольника: fillRect() — это цвет заливки прямоугольника,strokeRect() — обводка прямоугольника, аclearRect() — очищает прямоугольник. Все эти три метода получают 4 параметра x/y/w/h, координаты верхнего левого угла прямоугольника, а также ширину и высоту.
var draw = document.getElementById('draw'); //Подтверждаем, поддерживает ли браузер элемент <canvas> if(draw.getContext){ var context = draw.getContext('2d'); //Рисуем красный прямоугольник и зеленый контур Edge context.fillStyle = '#f00'; context.strokeStyle = '#0f0'; context.fillRect(10,10,50,50); //Рисуем зеленый прямоугольник с красной обводкой context.fillStyle = '#0f0'; context.strokeStyle = '#f00'; context.strokeRect(10,10,50); , 50); context.fillRect(10,10,50,50); //Очищаем небольшой прямоугольник, где два прямоугольника перекрываются context.clearRect(40,40,10,10);}5. Нарисуйте пути. С помощью путей можно создавать сложные фигуры и линии. Чтобы нарисовать путь, сначала вызовите метод BeginPath(), а затем используйте следующий метод, чтобы нарисовать путь.
дуга(x,y,радиус,startAngle,endAngle,против часовой стрелки)
(x, y) координаты центра окружности, радиус, (startAngle, endAngle) начальный и конечный угол, против часовой стрелки (ложь)/против часовой стрелки (истина)
moveTo(x,y) перемещает курсор в точку (x,y) без рисования линии. Может использоваться для изменения так называемых координат предыдущей точки*
arcTo(x1,y1,x2,y2,радиус)
Нарисуйте кривую, начиная с предыдущей точки до (x2, y2) и проходя через (x1, y1) с заданным радиусом.
lineTo(x,y) рисует прямую линию от предыдущей точки до (x,y)
прямоугольник (x,y,ширина,высота)
Нарисуйте прямоугольник, начиная с (x, y), с шириной и высотой как шириной и высотой. Этот метод рисует прямоугольный путь вместо независимых фигур, нарисованных с помощьюstrokeRect() и fillRect().
//Далее рисуем часы без цифр var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); //Начальный путь context.beginPath( ); /Нарисуйте внешний круг context.arc(100,100,99,0,2*Math.PI,false); //Рисуем внутренний круг context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Рисуем минутную стрелку context.moveTo(100,100); context.lineTo(100); ,15) ; //Рисуем часовую стрелку context.moveTo(100,100); context.lineTo(35,100); //Путь обводки context.stroke();6. Существует два основных метода рисования текста: fillText() иstrokeText(), каждый из которых получает четыре параметра |текст (текст, который нужно нарисовать)|x|y|максимальная ширина в пикселях (необязательно)|. на основе следующих трех атрибутов
стиль текста шрифта, размер, шрифт и т. д.
textAlign выравнивание текста |начало|конец|слева|справа|центр|
textBaseline Базовая линия текста|верхняя|висячая|средняя|алфавитная|идеографическая|нижняя|
//Нарисуйте 12 часов на циферблате context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText('12',100,20);7. Трансформация
Rotate(angel) вращает угол изображения в радианах вокруг начала координат.
Scale(scaleX,scaleY) масштабирует изображение, x*scaleX,y*scaleY по умолчанию равно 1
translate(x,y) перемещает начало координат в (x,y)
var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //Начальный путь context.beginPath(); //Рисуем внешний круг context.arc( 100,100,99,0,2*Math.PI,false); //Рисуем внутренний круг context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Преобразование исходной точки context.translate(100,100); //Поворот стрелки context.rotate(1) //Нарисование контекста минутной стрелки. moveTo(0, 0); context.lineTo(0,-85); //Рисуем часовую стрелку context.moveTo(0,0); context.lineTo(-65,0); //Путь обводки context.stroke();8. Нарисуйте изображение, drawImage().
var img = document.getElementByTagNames('image')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);9 параметров: изображение, которое нужно нарисовать, исходное изображение |x|y|w|h|, целевое изображение |x|y|w|h|
9. Тени и градиенты
Тень в основном имеет следующие значения атрибутов:
var context = draw.getContext('2d'); //Установить тень context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; Gradient создает новый метод линейного градиента createLinearGradient(), Там четыре параметра |x1|y1|x2|y2|, которые являются координатами начальной точки и координатами конечной точки var градиент = context.createLinearGradient(30,30,70,70); градиент.addColorStop(0,'#fff'); //0 означает начало градиента.addColorStop(1,'#000'); //1 означает конец //Использовать Определенный атрибут градиента context.fillStyle = градиент // Добавляем градиент при заполнении context.fillRect(30,30,50,50);Создайте радиальный градиент createRadialGradient(), шесть параметров |x1|y2|radius1|x2|y2|radius2| — это центр и радиус первого круга, а также центр и радиус второго круга соответственно. Использование такое же, как и у линейного градиента.
10. Используя данные изображения, вы можете получить исходные данные изображения с помощью getImageData(). Четыре параметра |x|y|w|h|. Каждый объект ImageData имеет три атрибута: ширина/высота/данные. Данные представляют собой массив, в котором внутри хранятся данные каждого пикселя. Значение каждого элемента находится в диапазоне 0–255.
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, красный = данные[0], зеленый = данные[1], синий = данные[2], альфа = данные[3]; Серый фильтр var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; //Рисуем исходное изображение context.drawImage(img,0,0,100,100); // Получить данные изображения imageData = context.getImageData(0,0,img.width,img.height data = imageData.data); for(i=0,len=data.length;i<len;i+=4){ красный = данные[i]; зеленый = данные[i+1]; синий = данные[i+2]; i+3]; //Вычисляем среднее значение RGB Average = Math.floor((red+green+blue)/3); //Устанавливаем значение цвета data[i] = Average; data[i+1] = Average; данные [я+2] = среднее } imageData.data =; data //Рисуем данные на холсте context.putImageData(imageData,0,0)}Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.