<canvas></canvas> — это новый тег в HTML5, используемый для рисования графики. Фактически, этот тег аналогичен другим тегам. Его особенность заключается в том, что этот тег может получить объект CanvasRenderingContext2D, который мы можем использовать в сценариях JavaScript. Управлять этим объектом для рисования.
<canvas></canvas> — это просто контейнер для рисования графики. Помимо таких атрибутов, как идентификатор, класс и стиль, он также имеет атрибуты высоты и ширины. Рисование на элементе <canvas>> состоит из трех основных шагов:
<canvas> , который является объектом Canvas; Ниже приведен простой пример рисования <canvas> :
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>демонстрация рисования на холсте</title> <style type=text/css> #canvas{ border: 1px Solid #ADACB0; дисплей: блок; поле: 20 пикселей авто } </style></head><body> <canvas id=canvas width=300 height=300> Ваш браузер пока не поддерживает холст </canvas></body><script type=text/javascript> var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); и конечная точка context.moveTo(10,10); context.lineTo(200,200); //Установим стиль context.lineWidth = 2; context.strokeStyle = #F5270B //Рисуем context.stroke();</script></html>Если это не указано в методе moveTo(), начальная точка lineTo() основывается на предыдущей точке. Поэтому, если вам нужно повторно выбрать начальную точку, вам нужно передать метод moveTo(). Если вам нужно установить стили для разных сегментов линии, вам нужно заново открыть путь через context.beginPath(). Вот пример:
<script type=text/javascript> var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); //Установим начальную и конечную точку объекта context.beginPath(); context.moveTo( 100,100); context.lineTo(700,100); context.lineTo(700,400); context.lineWidth = 2; context.strokeStyle = #F5270B; //Рисуем context.stroke(); context.moveTo(100,200); //Эффект замены moveTo на lineTo здесь тот же context.lineTo(600,200); ) ; //Если цвет StrokeStyle имеет новое значение, он перезапишет значение, установленное выше. //Если у lineWidth нет нового значения, оно будет отображаться в соответствии со значением, установленным выше. context.stroke();</script >
Рисуем прямоугольники rect(), fillRect() иstrokeRect().
<script type=text/javascript> var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); //Используйте метод rect context.rect(10,10,190,190); context.lineWidth = 2; . fillStyle = #3EE4CB; context.strokeStyle = #F5270B; context.fill(); //Используем метод fillRect context.fillStyle = #1424DE; context.fillRect(210,10,190,190); //Используем методstrokeRect context.strokeStyle = #F5270B; context.strokeRect(410,10,190,190); //Используем методstrokeRect и fillRect в в то же время метод context.fillStyle = #1424DE; #F5270B; context.strokeRect(610,10,190,190); context.fillRect(610,10,190,190);</script>
Здесь необходимо объяснить два момента: Первый момент — это порядок до и после отрисовки штрихов() и fill(). Если fill() рисуется позже, то, когда граница обводки становится больше, граница, нарисованная с помощью Stroke(). Половина; второй момент: при настройке атрибута fillStyle илиstrokeStyle вы можете установить его с помощью метода настройки rgba(255,0,0,0.2).
Есть еще один способ, связанный с рисованием прямоугольников: очистка прямоугольной области: context.clearRect(x,y,width,height).
Полученные параметры: начальная позиция чистого прямоугольника, а также ширина и длина прямоугольника.
В приведенном выше коде добавьте в конце рисования графика:
context.clearRect(100,60,600,100);
Можно получить следующие эффекты:
Нарисуйте пятиконечную звездуАнализируя пятиконечную звезду, мы можем определить правила координат каждой вершины. Здесь следует отметить следующее: на холсте направление оси Y направлено вниз.
Соответствующий код выглядит следующим образом:
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.beginPath(); //Установим координаты вершины и сформулируем путь на основе вершины for (var i = 0; i < 5; я++) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 }; context.closePath(); //Установим стиль границы и цвет заливки context.lineWidth=3; context.fillStyle = #F6F152; context.strokeStyle = #F5270B; context.fill();Конечный эффект:
Свойства линииПомимо атрибута lineWidth, использованного выше, линии также имеют следующие атрибуты:
Свойство lineCap устанавливает или возвращает стиль окончания строки. Оно может принимать следующие значения:
Свойство lineJoin устанавливает или возвращает тип угла, создаваемого при пересечении двух линий. Оно может принимать следующие значения:
Свойство miterLimit устанавливает или возвращает максимальную длину среза (по умолчанию — 10). Длина под углом относится к расстоянию между внутренним и внешним углами, где встречаются две линии. miterLimit действителен только в том случае, если атрибут lineJoin имеет значение mitre.
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); //Проверка свойства lineCap //Установка базовой линии для удобства наблюдения context.moveTo(10,10); context.lineTo(10,200); . moveTo(200,10); context.lineTo(200,200); context.lineWidth=1; // приклад context.beginPath(); context.moveTo(10,50); context.lineTo(200,50); context.lineCap=butt; context.lineWidth=10; //round context.beginPath(); ; context.moveTo(10,100); context.lineTo(200,100); context.lineCap=round; context.lineWidth=10; context.stroke(); //квадрат context.beginPath(); context.moveTo(10,150); context.lineCap=square; context.lineWidth=10; //Тест. Свойство linJoin // митра context.beginPath(); context.moveTo(300,50); context.lineTo(450,100); context.lineTo(300,150); context.lineJoin=miter; context.lineWidth=10; context.stroke(); //round context.beginPath(); context.lineTo(550,100); context.lineTo(400,150); context.lineJoin=round; context.lineWidth=10; //square(); context.beginPath(); context.moveTo(500,50); context.lineTo(650,100); context.lineTo(500,150); context.lineJoin=bevel; context.lineWidth=10; context.stroke(); Атрибут miterLimit context.beginPath(); context.moveTo(700,50); context.lineTo(850,100); context.lineTo(700,150); context.lineJoin=miter; context.miterLimit=2; context.strokeStyle=#2913EC;
Эффекты различных значений для каждого атрибута следующие:
Стиль заливкиПомимо установки цвета, использованные ранее fillStyle и StrokeStyle также могут устанавливать другие стили заливки. Здесь в качестве примера мы возьмем fillStyle:
линейный градиентЭтапы использования
(1) var grd = context.createLinearGradient(xstart, ystart, xend, yend) создает линейный градиент и устанавливает начальную и конечную координаты;
(2) grd.addColorStop(stop, color) добавляет цвет к линейному градиенту, значение stop — от 0 до 1;
(3) context.fillStyle=grd будет присвоен контексту.
радиальный градиентЭтот метод аналогичен методу линейного градиента, за исключением того, что параметры, полученные на первом этапе, отличаются.
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1) получает координаты и радиус начального центра круга и координаты и радиус конечного центра круга;
Заполнение растрового изображенияcreatePattern(img,repeat-style) заполняется изображениями, а стиль повторения может быть повторением, повторением-x, повтором-y или без повторения.
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); //Линейный градиент var grd = context.createLinearGradient(10, 10, 100, 350); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(0.75,#2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(10,10,100,350); grd = context.createRadialGradient(325, 200, 0, 325, 200, 200); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(0.75,#2F0AF1); ; grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(150,10,350,350); //Заполнение растровым изображением var bgimg = new Image(); bgimg.src = bgimg.onload= function; () { var шаблон = context.createPattern(bgimg, повторение); context.fillStyle = шаблон; context.strokeStyle=#F20B0B; context.fillRect(600, 100, 200,200); context.strokeRect(600, 100, 200,200 });Эффект следующий:
Графическое преобразованиеПеревод: context.translate(x,y), полученные параметры — это перевод начала координат на x в направлении оси x и перевод y в направлении оси y.
Масштабирование: context.scale(x,y), полученные параметры заключаются в том, что ось координат x масштабируется в соответствии с пропорцией x, а ось координат y масштабируется в соответствии с пропорцией y.
Вращение: context.rotate(angle), полученный параметр — угол поворота оси координат.
Следует отметить, что после изменения графики следующий рисунок будет следовать предыдущему состоянию, поэтому, если вам нужно вернуться в исходное состояние, вам нужно использовать context.save(); и context.restore(); текущее состояние:
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); //translate() context.save(); #1424DE; context.translate(10,10); (0,0,200,200); context.restore(); //масштаб() context.save(); context.fillStyle = #F5270B; context.scale(0.5,0.5); context.fillRect(500,50,200,200); context.restore(); //rotate() context.save(); context.fillStyle = #18EB0F; context.rotate(Math) .PI/4); context.fillRect(300,10,200,200);
Эффект следующий:
Еще одна вещь, связанная с преобразованием графики: преобразование матрицы: context.transform(a, b, c, d, e, f, g). Смысл параметров следующий:
горизонтальное масштабирование (по умолчанию 1)
b горизонтальный наклон (по умолчанию 0)
c вертикальный наклон (по умолчанию 0)
d вертикальное масштабирование (по умолчанию 1)
e горизонтальное смещение (по умолчанию 0)
f вертикальное смещение (по умолчанию 0)
Читатели могут самостоятельно проверить влияние каждого параметра, и я не буду представлять их здесь по одному.
нарисовать кривуюДля рисования кривых предусмотрены четыре функции, а именно:
context.arc(x,y,r,sAngle,eAngle,против часовой стрелки); используется для создания дуг/кривых (используется для создания кругов или частичных кругов); Смысл полученных параметров:
| Параметры | Значение |
:--- |:---|
| х | х координата центра круга |
|y|Y-координата центра круга|
|r|радиус окружности|
|sAngle|Начальный угол в радианах (положение окружности дуги на три часа составляет 0 градусов)|
|eAngle|Конечный угол в радианах|
|против часовой стрелки|Необязательно. Указывает, следует ли рисовать график против часовой стрелки или по часовой стрелке. Ложь = по часовой стрелке, правда = против часовой стрелки |
Вот несколько примеров нескольких функций arc():
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.strokeStyle = #F22D0D; context.lineWidth = 2; //Рисуем круг context.beginPath(); context.arc(100,100, 40 ,0,2*Math.PI); context.stroke(); //Рисуем полукруг context.beginPath(); context.arc(200,100,40,0,Math.PI); context.stroke(); //Рисуем полукруг против часовой стрелки context.beginPath(); context.arc(300,100,40,0,Math.PI,true) ; context.stroke(); //Рисуем замкнутый полукруг context.beginPath(); context.arc(400,100,40,0,Math.PI); context.closePath(); context.stroke();
Эффект следующий:
context.arcTo(x1,y1,x2,y2,r); Создает дугу/кривую на холсте между двумя касательными. Смысл полученных параметров:
| параметр | значение |
|---|---|
| х1 | координата x контрольной точки дуги |
| у1 | Координата Y контрольной точки дуги |
| х2 | координата x конечной точки дуги |
| у2 | Координата Y конечной точки дуги |
| р | радиус дуги |
Здесь необходимо отметить, что начальную точку кривой, нарисованной функцией arcTo, необходимо установить с помощью функции moveTo(). Функция arcTo используется ниже для рисования закругленного прямоугольника:
function createRoundRect(context, x1, y1, width, height, radius) { // Переходим в левый верхний угол context.moveTo(x1 + radius, y1 // Добавляем сегмент линии, соединенный с правым верхним углом context.lineTo); (x1 + ширина - радиус, y1 //Добавляем дугу context.arcTo(x1 + ширина, y1, x1 + ширина, y1 +); radius, radius); // Добавляем сегмент линии, соединенный с правым нижним углом context.lineTo(x1 + width, y1 + height - radius // Добавляем дугу context.arcTo(x1 + width, y1 + height, x1); + ширина - радиус, y1 + высота, радиус); // Добавляем сегмент линии, соединенный с нижним левым углом context.lineTo(x1 + radius, y1 + height); Добавить дугу context.arcTo(x1, y1 + height, x1, y1 + height - radius, radius // Добавить сегмент линии, соединенный с верхним левым углом context.lineTo(x1, y1 + radius); // Добавить; дуга Arc context.arcTo(x1, y1, x1 + radius, y1, radius context.closePath()); //; Получить объект DOM, соответствующий элементу холста var Canvas = document.getElementById('mc'); // Получить объект CanvasRenderingContext2D, нарисованный на холсте var context = Canvas.getContext('2d'); context.lineWidth = 3; StrokeStyle = #F9230B; createRoundRect (контекст, 30, 30, 400, 200, 50); контекст.ход();Эффект следующий:
context.quadraticCurveTo(cpx,cpy,x,y); Нарисовать квадратичную кривую Безье. Значения параметра следующие:
| параметр | значение |
|---|---|
| cpx | Координата X контрольной точки Безье |
| копировать | Координата Y контрольной точки Безье |
| х | координата x конечной точки |
| й | координата y конечной точки |
Начальная точка кривой — это последняя точка текущего пути. Если путь не существует, используйте методы BeginPath() и moveTo(), чтобы определить начальную точку.
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); Нарисуйте кубическую кривую Безье со следующими параметрами:
| параметр | значение |
|---|---|
| cp1x | координата x первой контрольной точки Безье |
| cp1y | Координата Y первой контрольной точки Безье |
| cp2x | координата x второй контрольной точки Безье |
| cp2y | Координата Y второй контрольной точки Безье |
| х | координата x конечной точки |
| й | координата y конечной точки |
В основном существует три свойства и три метода, связанных с рендерингом текста:
| свойство | описывать |
|---|---|
| шрифт | Устанавливает или возвращает текущие свойства шрифта текстового содержимого. |
| textAlign | Устанавливает или возвращает текущее выравнивание текстового содержимого. |
| textBaseline | Устанавливает или возвращает текущую базовую линию текста, используемую при рисовании текста. |
| метод | описывать |
|---|---|
| заполнитьТекст() | Нарисуйте заполненный текст на холсте |
| штрихтекст() | Нарисовать текст на холсте (без отступов) |
| мераТекст() | Возвращает объект, содержащий указанную ширину текста |
Основное использование вышеуказанных свойств и методов выглядит следующим образом:
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.font=bold 30px Arial; //Установим стиль context.strokeStyle = #1712F4; context.strokeText(Добро пожаловать в мой блог! , 30,100); context.font=bold 50 пикселей Arial var grd = context.createLinearGradient( 30; , 200, 400, 300 );//Установим стиль градиентной заливки grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(0.75); , #2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillText(Добро пожаловать в мой блог!,30,200); context.moveTo(200,280); context.lineTo(200,420) ; .stroke(); context.font=жирный шрифт 20 пикселей Arial context.fillStyle = #F80707; context.textAlign=left; context.fillText(Текст начинается с указанной позиции, 200,300); context.textAlign=center; context.fillText(Центр текста размещается в указанной позиции, 200,350); .textAlign= right; context.fillText(текст заканчивается в указанной позиции, 200, 400); context.restore(); context.save(); context.moveTo(10,500); context.lineTo(500,500); context.fillStyle=#F60D0D; context.font=bold 20px Arial; context.fillText(указанная позиция указана выше, 10 500); context.textBaseline=дно; context.fillText (указанная позиция ниже, 150 500); context.textBaseline=middle; context.fillText (указанная позиция посередине, 300 500); context.font=bold 40px Arial; #16F643; var text = Добро пожаловать в мой блог! ; context.strokeText(Добро пожаловать в мой блог!,10,600); context.strokeText(Ширина приведенной выше строки: +context.measureText(text).width,10,650);
Эффект следующий:
Другие свойства и методы Теневой рисунок:Давайте добавим тень пятиконечной звезде, которую мы нарисовали ранее.
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.beginPath(); //Установим координаты вершины и сформулируем путь на основе вершины for (var i = 0; i < 5; я++) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 }; context.closePath(); //Установим стиль границы и цвет заливки context.lineWidth=3; context.fillStyle = #F6F152; context.strokeStyle = #F5270B; context.shadowColor = #F7F2B4; context.shadowOffsetX = 30; ShadowOffsetY = 30; context.shadowBlur = 2; context.fill();Эффект следующий:
Графическое сочетание:globalAlpha: устанавливает или возвращает текущее значение альфа или прозрачности рисунка.
Этот метод в основном предназначен для установки прозрачности графики, которая здесь не будет подробно описываться.
globalCompositeOperation: устанавливает или возвращает способ рисования нового изображения на существующем изображении. Этот метод имеет следующие значения атрибутов:
| ценить | описывать |
|---|---|
| исходный код | Отображать исходное изображение поверх целевого изображения (по умолчанию) |
| источник поверх | Отображает исходное изображение поверх конечного изображения. Части исходного изображения, находящиеся за пределами целевого изображения, невидимы. |
| источник-вход | Отобразите исходное изображение внутри целевого изображения. Будет отображена только часть исходного изображения внутри конечного изображения. |
| источник-выход | Отображает исходное изображение в дополнение к целевому изображению. Отображается только часть исходного изображения за пределами конечного изображения, а конечное изображение прозрачно. |
| пункт назначения | Отображение целевого изображения поверх исходного изображения |
| пункт назначения на вершине | Отображает конечное изображение поверх исходного изображения. Части целевого изображения, находящиеся за пределами исходного изображения, невидимы. |
| пункт назначения | Отображает конечное изображение внутри исходного изображения. Будет отображаться только часть целевого изображения внутри исходного изображения, а исходное изображение прозрачно. |
| пункт назначения | Отображает целевое изображение в дополнение к исходному изображению. Будет отображаться только часть целевого изображения за пределами исходного изображения, а исходное изображение прозрачно. |
| легче | Отображать исходное изображение + целевое изображение |
| копировать | Показать исходное изображение. Игнорировать целевое изображение |
| исключающее ИЛИ | Объедините исходные и целевые изображения с помощью операции XOR. |
Вот небольшой пример того, как комбинацию можно изменить одним кликом:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Графическая комбинация</title> <style type=text/css> #canvas{ border: 1px Solid #1C0EFA display; : блок; поле: 20 пикселей авто; } #buttons { ширина: 1000 пикселей; поле: 5 пикселей авто; размер шрифта: 18 пикселей; дисплей: блок; плавающий: слева; маржа слева: 20 пикселей; </style></head><body> <canvas id=canvas width=1000 height=800> Ваш браузер еще не поддерживается. Canvas </canvas> <div id=buttons> <a href=#>source-over</a> <a href=#>source-atop</a> <a href=#>входной источник</a> <a href=#>выходной источник</a> <a href=#>назначение</a> <a href=#>назначение сверху</a> <a href=#>входной пункт назначения</a> <a href=#>выходной пункт назначения</a> <a href=#>светлее</a> <a href=#>копия</a> <a href=#>xor</a> </div></body><script type=text/javascript>window.onload = function(){ draw(source-over); var button = document.getElementById(buttons). getElementsByTagName(a); for (var i = 0; i < button.length; i++) { button[i].onclick = function() { draw(this.text); }}; function draw(compositeStyle){ var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.clearRect(0, 0, Canvas.width, Canvas.height); //рисуем заголовок context.font = жирный шрифт 40 пикселей Arial; context.textAlign = center; context.textBasedline = middle; context.fillStyle = #150E0E; context.fillText(globalCompositeOperation = +compositeStyle, Canvas.width/2, 60); //рисуем прямоугольник context.fillStyle = #F6082A; context.fillRect(300, 150, 500, 500); //рисуем треугольник context. globalCompositeOperation = CompositeStyle; context.fillStyle = #1611F5; context.beginPath(); context.moveTo(700, 250); context.lineTo(1000,750); context.lineTo(400, 750); context.fill(); </html>Читатели могут нажать на метку, чтобы увидеть различные эффекты комбинации. Эффекты следующие:
Область обрезки:Метод clip() вырезает любую форму и размер из исходного холста.
Совет: После того как вы вырежете область, все последующие рисунки будут ограничены этой областью (доступ к другим областям на холсте будет невозможен). Вы также можете сохранить текущую область холста, используя метод save() перед использованием метода clip(), и восстановить ее в любое время в будущем (с помощью метода восстановления()).
Ниже приведен пример использования круга для пересечения прямоугольника:
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.beginPath(); context.fillStyle = #0C0101; context.fillRect(0,0,canvas.width,canvas.height); context.beginPath(); context.fillStyle = #FFFDFD; context.arc(400,400,100,0,2*Math.PI); context.clip(); context.fillStyle = #F60825; context.fillRect(200, 350, 400, 50);
Помимо вышеперечисленных атрибутов и методов, существуют также следующие методы:
drawImage(): рисует изображение, холст или видео на холсте.
toDataURL(): сохранить графику
isPointInPath(): возвращает true, если указанная точка находится на текущем пути, в противном случае — false.
Я не буду приводить здесь примеры по одному.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.