Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Атрибути и методи

Атрибут и стойност Описание
ctx.fillStyle="color"; Цвят на запълване на фигурата, за color се записва името на цвета или шестнадесетичен код
ctx.strokeStyle="color"; Цвят на контура на фигурата, за color се записва името на цвета или шестнадесетичен код
ctx.lineCap="type"; Форма на края на линията, за type се записва butt, round или square
ctx.lineJoin="type"; Форма на връзката на линиите, за type се записва bevel, round или miter
ctx.lineWidth=n; Дебелина на линиите, за n се записва стойност в пиксели
ctx.miterLimit=n; Ограничение за размера в края на линиите, за n се записва стойност в пиксели
ctx.shadowColor="color"; Цвят на сянката, за color се записва името на цвета или шестнадесетичен код
ctx.shadowOffsetX=n; Хоризонтално разстояние до сянката, за n се записва стойност в пиксели
ctx.shadowOffsetY=n; Вертикално разстояние до сянката, за n се записва стойност в пиксели
ctx.shadowBlur=n; Размер на ефекта на размиване на сянката, за n се записва стойност в пиксели
ctx.font="style variant weight size family"; Позволява определянето на снойности за символите в текста. Примерни стойностите са: за style - normal и italic; за variant - normal и small-caps; за weight - normal и bold; за size се задава размера в пиксели (например 30px); за family се записва вида на символите (например Arial)
ctx.textAlign="right"; Използва се за подравняване на текст. Стойностите са center, end, left, right и start.
ctx.textBaseline=
"стойност";
Използва се за подравняване на текста по вертикала. Стойностите са alphabetic, bottom, middle, top, hanging и ideographic. За изписване на текста се използва метода ctx.fillText("текст",x,y), където x и y е местоположението на текста.

Метод Описание
var grd = ctx.createLinearGradient(x0,y0,x1,y1); Създава обект с градиент. Този обект се използва ката стойност за атрибутите на strokeStyle или fillStyle. x0,y0 - начални координати; x1,y1 - координати на границата
var grd = ctx.createRadialGradient(x0,y0,r0,x1,y1,r1); Методът създава градиент в окръжност с начало x0,y0, радиус първи цвят r0, крайни координати x1,y1 и радиус втори цвят r1. За определяне на цвета и неговото место се използва метода addColorStop().
grd.addColorStop(позиция,"цвят"); Методът addColorStop се използва заедно с createLinearGradient method или createRadialrGradient, като определя позицията като число от 0 (начало) до 1(край) и цвета като име(red) или шестнадесетичен код(##FF0000).
var pat=ctx.createPattern(обект,"начин"); Създава модел по даден обект, който може да бъде изображение, видео или друг елемент. Този модел може да се използва за запълване на правоъгълник, окръжност, линия и др. Начинът може да бъде repeat, repeat-x, repeat-y или no-repeat.
ctx.fillRect(x,y,w,h) Определя правоъгълник с определен от атрибута на fillStyle цвят. Начални координати - x и y. Широчина и височина на четириъгълника - w и h.
ctx.strokeRect(x,y,w,h) Създава правоъгълник с цвят на контура, определен от атрибута strokeStyle. Начални координати - x и y. Широчина и височина на четириъгълника - w и h.
ctx.clearRect(x,y,w,h) Изтрива пикселите в определения четириъгълник. Начални координати - x и y. Широчина и височина на четириъгълника - w и h.
ctx.beginPath() Изтрива текущото и определя началото на ново трасе. За създаване на трасе се използват методите moveTo(), lineTo(), quadricCurveTo, bezierCurveTo, arcTo и arc(). За изчертаване на трасето се използват методите stroke() и fill()
ctx.moveTo(x,y) Придвижва трасето до точка с координати x и y без да изчертава линия.
ctx.closePath() Изчертава линия от текущата до началната точка на трасето. За изчертаване на трасето се използва метода stroke(). За запълване на затворения контур се използва метода fill() с цвят определено от атрибута fillStyle.
ctx.lineTo(x,y) Изчертава линия от точката на трасето до координати x и y.
ctx.rect(x,y,w,h) Изчертава правоъгълник с начални координати x и y, широчина и височина w и h.
ctx.fill() Запълва текущото трасе с цвят, определен от атрибута fillStyle. Ако трасето не е затворено този метод затваря трасето подобно на метода closePath().
ctx.stroke() Очертава текущото трасе с цвят, определен от атрибута strokeStyle .
ctx.clip() Определя видима площ, която се описва с различните методи.
ctx.quadraticCurveTo(cpx,cpy,x,y) Изчертава крива от текуща точка, определена с метода moveTo до определена точка [x,y], през контролна точка [cpx,cpy]
ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) Изчертава крива от текуща точка, определена с метода moveTo до определена точка [x,y], през контролни точки [cp1x,cp1y] и [cp2x,cp2y]
ctx.arc(x,y,r,sAngle,eAngle,clockwise) Изчертава окръжност или част от окръжност. Задават се координати на центъра x,y, радиус r, начален ъгъл sAngle, краен ъгъл eAngle. Последните две стойности са в радиани и се заместват с формулата (n*Math.PI), къдет n е част ат окръжността, която определя ъгъла. Цялата окръжност е 2*Math.PI радиана. За изчертаване или запълване на фигурата се използват методите stroke() или fill().
ctx.arcTo(x1,y1,x2,y2,r) Изчертава дъга между точки [x1,y1] и [x2,y2] с радиус r.
ctx.scale(x,y) Мащабира по x (ширина) и y(височина) съществуващи фигури. При намаляване стойностите са по-малки от единица, а при увеличаване са по-големи от единица.
ctx.rotate(angle) Завърта съдържанието на определен ъгъл, който се задава в радиани.
ctx.translate(x,y) Положението на фигурите, които се чертаят след метода translate(x,y) се променя в съответствие с зададените координати x и y.
ctx.transform(a,b,c,d,e,f) Използва се матрица за мащабиране, завъртане, преместване и изкривяване на фигури, следващи метода. Параметри на матрицата: a - мащабиране по x; b - изкривяване по x; c - изкривяване по y; d - мащабиране по y; e - хоризонтално придвижване на фигурата; f - вертикално придвижване на фигурата.
setTransform(a,b,c,d,e,f) Изтрива текущата трандформация и задава нови стойности.
ctx.fillText(text,x,y,maxWidth) Задава текст с определен цвят. Параметрите са: text - текста, който ще се запише; x и y - координати на началото на текста; maxWidth - максимална дължина на текста в пиксели.
ctx.strokeText(text,x,y,maxWidth) Изчертава текст само с контури с цвят, зададен от атрибута strokeStyle. Параметрите са: text - текста, който ще се запише; x и y - координати на началото на текста; maxWidth - максимална дължина на текста в пиксели.
ctx.measureText(text).width Методът дава дължината на определен текст в пиксели. Използва се когато е необходимо предварително да се знае дължината на текста.