Canvas

Canvas - елемент для малювання на полотні.

Синтаксис:

var canvas= document.createElement('canvas');

Параметри:

canvas - змінна якій присвоюється елемент Canvas.

Опис:

Канвас у яваскрипт

Канва у ДжаваСкрипт

Малювання на канві у JavaScript

Canvas елемент HTML5 який містить полотно для малювання за допомогою JavaScript.

Для опису елемента Canvas у HTML документі використовується тег <canvas>.

Для малювання на полотні елемента canvas використовується об'єкт CanvasRenderingContext2D.

Не підтримують старі браузери.

Елемент Canvas можна отримати з веб-документу у JavaScript за допомогою методів document.getElementById(), document.getElementsByName(), document.getElementsByTagName(), document.getElementsByClassName(), document.querySelector(), document.querySelectorAll().

В середині елемента Canvas можна написати текст який браузер буде показувати коли не підтримує полотно для малювання:

<canvas>Ваш браузер не підтримує елемент canvas.</canvas> <canvas><b style="color:red">Ваш браузер не підтримує canvas.</b></canvas>

У JavaScript Canvas являється об'єктом Element який має додатково власні методи.

Приклад:

Ваш браузер не підтримує canvas.
canvas=document.getElementById("canvas"); if(canvas.getContext){ ctx=canvas.getContext("2d"); if(ctx!==null){ w=35; h=35; x=(canvas.width-w)/ 2; y=(canvas.height-h)/2; ctx.fillStyle="red"; l=false; t=false; function kyb(){ if(l)x--;else x++; if(t)y--;else y++; if(x<0)l=false; if(x+w>canvas.width)l=true; if(y<0)t=false; if(y+h>canvas.height)t=true; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(x, y, w, h); setTimeout("kyb()", 50); } kyb(); }else alert("Ваш браузер не підтримує 2D"); }else alert("Ваш браузер не підтримує canvas.getContext");

"Літаючий" текст на canvas:

Ваш браузер не підтримує canvas. function textBig(canvas){ var mas=[]; this.ctx=canvas.getContext("2d"); this.width=canvas.width; this.height=canvas.height; this.add=function( text, color, font, x, y,v,h){ var t={}; t.text=text; t.font=font; t.color=color; t.x=x; t.y=y; t.v=v; t.h=h; mas[mas.length]=t; } this.next=function(){ this.ctx.clearRect(0, 0, this.width, this.height); for(i=0;i<mas.length;i++){ if(mas[i].v!=0) mas[i].y=(mas[i].v>0? mas[i].y+1 : mas[i].y-1); if(mas[i].h!=0) mas[i].x=(mas[i].h>0? mas[i].x+1 : mas[i].x-1); if(mas[i].x>this.width)mas[i].h=-1; if(mas[i].x<0)mas[i].h=1; if(mas[i].y>this.height)mas[i].v=-1; if(mas[i].y<0)mas[i].v=1; this.ctx.font=mas[i].font; this.ctx.fillStyle=mas[i].color; this.ctx.fillText(mas[i].text, mas[i].x, mas[i].y); } } } var ob=new textBig( document.getElementById("canvas2") ); ob.add("JavaScript", "red", "12pt Arial", 5, 5); ob.add("test", "blue", "24px Arial", 45, 55, 1, -1); ob.add("canvas", "yellow","18pt Arial", 35, 65, -1, -1); setInterval("ob.next()", 50);

Приклад простого Paint:

Ваш браузер Не підтримує canvas.

function myPaint(canvas){ if(canvas.getContext){ canvas.ctx = canvas.getContext("2d"); if(canvas.ctx!==null){ canvas.ctx.lineWidth=5; canvas.ctx.lineJoin="round"; canvas.ctx.lineCap="round"; canvas.ctx.strokeStyle="#000000"; canvas.bottonLeft=false; canvas.ontouchstart=function(e){ this.ctx.beginPath(); this.ctx.moveTo(e.touches[0].pageX-this.offsetLeft, e.touches[0].pageY-this.offsetTop); this.ctx.lineTo(e.touches[0].pageX-this.offsetLeft, e.touches[0].pageY-this.offsetTop); this.ctx.stroke(); this.ctx.closePath(); this.ctx.moveTo(e.touches[0].pageX-this.offsetLeft, e.touches[0].pageY-this.offsetTop); }; canvas.ontouchmove=function(e){ this.ctx.lineTo(e.touches[0].pageX-this.offsetLeft, e.touches[0].pageY-this.offsetTop); this.ctx.stroke(); this.ctx.closePath(); this.ctx.moveTo(e.touches[0].pageX-this.offsetLeft, e.touches[0].pageY-this.offsetTop); }; canvas.ontouchend=function(){ this.ctx.stroke(); this.ctx.closePath(); }; canvas.onmousedown=function(e){ this.bottonLeft=true; this.ctx.beginPath(); this.ctx.moveTo(e.offsetX, e.offsetY); this.ctx.lineTo(e.offsetX, e.offsetY+0.5); this.ctx.closePath(); this.ctx.stroke(); this.ctx.moveTo(e.offsetX, e.offsetY); }; canvas.onmousemove=function(e){ if(this.bottonLeft==true){ this.ctx.lineTo(e.offsetX, e.offsetY); this.ctx.closePath(); this.ctx.stroke(); this.ctx.moveTo(e.offsetX, e.offsetY); } }; canvas.onmouseup=function(){ this.bottonLeft=false; this.ctx.closePath(); this.ctx.stroke(); }; return canvas; }else { alert("Ваш браузер не підтримує 2D"); return null; } }else { alert("Ваш браузер не підтримує canvas.getContext()"); return null; } } var paint=new myPaint( document.getElementById("myCanva") );