Rysowanie logo

var cName = "canvas";

var canvas = document.getElementById(cName);

var ctx = canvas.getContext("2d");

ctx.fillStyle="#FF0000";

//Obszar kontrolki będzie wyliczony po załadowaniu strony

var controlBounds;

//Wszystkie zdarzenia będą dla wygody umieszczone wewnątrz obiektu mouse

//W obiekcie mouse będą też wykorzystywane współrzędne X i Y

var mouse = new Object();

//Kontrolka posiada współrzędne X, Y, szerokość i wysokość

function Control(c){

var e = document.getElementById(c);

//Pobierz współrzędne elementu canvas

var windowOffset = (function(){

var node = e;

var offset = {X:0, Y:0};

do {

offset.X += node.offsetLeft;

offset.Y += node.offsetTop;

node = node.offsetParent;

} while (node);

return offset;

})();

//ustaw pola obiektu

this.X = windowOffset.X;

this.Y = windowOffset.Y;

this.Width = e.width;

this.Height = e.height;

}

//Uzupełniamy kontrolkę o metodę Contains

//Do sprawdzenia, czy kursor znajduje sie wewnątrz kontrolki

Control.prototype.Contains = function(x,y){

return x > this.X && y > this.Y &&

x < this.X + this.Width && y < this.Y + this.Height;

}

//Zdarzenie wciśnięcia przycisku myszy

mouse.Down = function(e){

ExtendFirefoxEvent(e);

mouse.X = e.offsetX;

mouse.Y = e.offsetY;

canvas.addEventListener("mousemove", mouse.Move, false);

window.addEventListener("mousemove", mouse.WindowMove, false);

};

//Zdarzenie zwolnienia przycisku myszy,

//Nasłuchiwane na poziomie okna

mouse.Release = function(){

canvas.removeEventListener("mousemove", mouse.Move, false);

window.removeEventListener("mousemove", mouse.WindowMove, false);

};

//Zdarzenie poruszania myszą, aktywne tylko wtedy,

//gdy poruszamy się wewnątrz elementu canvas

mouse.Move = function(e){

ExtendFirefoxEvent(e);

ctx.moveTo(mouse.X, mouse.Y);

mouse.X = e.offsetX;

mouse.Y = e.offsetY;

ctx.lineTo(mouse.X, mouse.Y);

ctx.strokeStyle = pencilColor;

ctx.stroke();

};

//Zdarzenie poruszania się po oknie przeglądarki,

//Określamy moment opuszczenia elementu canvas

mouse.WindowMove = function(e){

if (!controlBounds.Contains(e.pageX, e.pageY))

mouse.Release();

}

//Zaczynamy zabawę: nasłuchujemy zdarzeń przycisku myszy

canvas.addEventListener("mousedown", mouse.Down, false);

window.addEventListener("mouseup", mouse.Release, false);

//Dopiero po załadowaniu strony elementy będą poukładane

window.addEventListener("load", function(){controlBounds = new Control(cName);}, false);

function ExtendFirefoxEvent(e){

//Przeglądarka firefox nie posiada atrybutu offsetX

//Współrzędne pobierane są nieco inaczej

if (!e.hasOwnProperty("offsetX")){

e.offsetX = e.layerX - e.currentTarget.offsetLeft;

e.offsetY = e.layerY - e.currentTarget.offsetTop;

}

};

function clr(){

ctx.clearRect(0, 0, canvas.width, canvas.height);

}

Wybierz kolor pisaka:

selected="selected">Czarny

Biały

Czerwony

Zielony

Niebieski

Żółty

Jasnozielony

Turkusowy

Wybierz kolor płótna:

Czarny

Biały

Czerwony

Zielony

Niebieski

Żółty

Jasnozielony

Turkusowy

function uploadEx() {

var canvas = document.getElementById("canvas");

var dataURL = canvas.toDataURL("image/jpeg");

document.getElementById('hidden_data').value = dataURL;

var fd = new FormData(document.forms["form1"]);

var xhr = new XMLHttpRequest();

xhr.open('POST', 'wykonaj.php', true);

xhr.upload.onprogress = function(e) {

if (e.lengthComputable) {

var percentComplete = (e.loaded / e.total) * 100;

console.log(percentComplete + '% uploaded');

alert('Succesfully uploaded');

}

};

xhr.onload = function() {

};

xhr.send(fd);

};