CanvasRenderingContext2D

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

Синтаксис:

obCrc2d = canvas.getContext("2d");

Параметри:

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

canvas - елемент canvas.

Опис:

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 ); }