Skocz do zawartości

Rysowanie w php


viamraimar

Recommended Posts

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

};

Link do komentarza
Udostępnij na innych stronach

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś zawartość bez formatowania.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Utwórz nowe...