CanvasRenderingContext2D

CanvasRenderingContext2D - об'єкт для малювання на плотні елемента canvas.

Синтаксис:

ctx = Canvas.getContext("2d", contextAttributes);

Параметри:

ctx - змінна яка отримує об'єкт CanvasRenderingContext2D.

Canvas - елемент Canvas.

contextAttributes - не обов'язково вказувати. Об'єкт який містить додаткові параметри контексту.

Опис:

CanvasRenderingContext2D об'єкт який містить методи і властивості для малювання на полотні Canvas.

Щоб отримати об'єкт CanvasRenderingContext2D використовується метод Canvas.getContext().

Об'єкт CanvasRenderingContext2D дозволяє малювати на полотні Canvas: текст, лінії, прямокутники, коло і т.п.

Приклад:

Приклад малювання "світла" на чорному полотні:

Ваш браузер не підтримує canvas. var elCanvas = document.getElementById("canvas"); if(elCanvas.getContext){ var ctx= elCanvas.getContext("2d"); elCanvas.onmousemove=function(e){ var gradient = ctx.createRadialGradient(e.offsetX, e.offsetY, 50, e.offsetX, e.offsetY, 0); gradient.addColorStop(0, "black"); gradient.addColorStop(0.9, "white"); ctx.fillStyle="black"; ctx.fillRect(0, 0, elCanvas.width, elCanvas.height ); ctx.fillStyle = gradient; ctx.fillRect( (e.offsetX-100<0? 0: e.offsetX-100), (e.offsetY-100<0? 0: e.offsetY-100), e.offsetX+100, e.offsetY+100); } }else alert("Ваш браузер не підтримує getContext");

Приклад "світла ліхтарика" на полотні canvas:

var elCanvas = document.getElementById("canvas"); var ctx= elCanvas.getContext("2d"); elCanvas.onmousemove=function(e){ var gradient = ctx.createRadialGradient(e.offsetX, e.offsetY, 50, elCanvas.width/2, 0, 5); gradient.addColorStop(0.9, "white"); gradient.addColorStop(0.1, "black"); ctx.fillStyle="black"; ctx.fillRect(0, 0, elCanvas.width, elCanvas.height ); ctx.fillStyle = gradient; ctx.fillRect(0, 0, elCanvas.width, elCanvas.height ); }