Skocz do zawartości

viamraimar

Członkowie
  • Postów

    1
  • Dołączył

  • Ostatnio

    Nigdy

viamraimar's Achievements

Newbie

Newbie (1/14)

0

Reputacja

  1. 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 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); };
×
×
  • Utwórz nowe...