Canvas - елемент для малювання на полотні.
var canvas= document.createElement('canvas');
canvas - змінна якій присвоюється елемент Canvas.
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=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:
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:
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") );