Zgłoś Rysowanie w php w JavaScript Napisano Marzec 15, 2015 Rysowanie logovar cName = "canvas";var canvas = document.getElementById(cName);var ctx = canvas.getContext("2d");ctx.fillStyle="#FF0000";//Obszar kontrolki będzie wyliczony po załadowaniu stronyvar controlBounds;//Wszystkie zdarzenia będą dla wygody umieszczone wewnątrz obiektu mouse//W obiekcie mouse będą też wykorzystywane współrzędne X i Yvar 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 canvasvar 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 obiektuthis.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 kontrolkiControl.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 myszymouse.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 oknamouse.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 canvasmouse.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 canvasmouse.WindowMove = function(e){if (!controlBounds.Contains(e.pageX, e.pageY))mouse.Release();}//Zaczynamy zabawę: nasłuchujemy zdarzeń przycisku myszycanvas.addEventListener("mousedown", mouse.Down, false);window.addEventListener("mouseup", mouse.Release, false);//Dopiero po załadowaniu strony elementy będą poukładanewindow.addEventListener("load", function(){controlBounds = new Control(cName);}, false);function ExtendFirefoxEvent(e){//Przeglądarka firefox nie posiada atrybutu offsetX//Współrzędne pobierane są nieco inaczejif (!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">CzarnyBiałyCzerwonyZielonyNiebieskiŻółtyJasnozielonyTurkusowy Wybierz kolor płótna:CzarnyBiałyCzerwonyZielonyNiebieskiŻółtyJasnozielonyTurkusowy 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);};
Rysowanie w php
w JavaScript
Napisano
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);
};