Нарисуйте canvas HTML5 с помощью мыши

Я хочу использовать HTML-canvas с помощью мыши (например: нарисуйте подпись, нарисуйте имя, …)

Пожалуйста, помогите мне, как я могу это сделать? Укажите исходный код. спасибо

Вот рабочий образец.

    
Choose Color
Eraser

Вот самый простой способ создания приложения рисования с canvasом:

  1. Прикрепите к canvasу DOM mousemove mousedown , mousemove и mouseup
  2. на mousedown , получить координаты мыши и использовать метод moveTo() чтобы beginPath() курсор рисования и метод beginPath() чтобы начать новый путь рисования.
  3. на mousemove , непрерывно добавляйте новую точку к пути с помощью lineTo() и окрашивайте последний сегмент с помощью stroke() .
  4. на mouseup , установите флаг для отключения чертежа.

Оттуда вы можете добавить всевозможные другие функции, такие как предоставление пользователю возможности выбирать толщину линии, цвет, мазки кисти и даже слои.

Googled this («html5 canvas paint program»). Похоже, что вам нужно.

http://dev.opera.com/articles/view/html5-canvas-painting/

проверьте это http://jsfiddle.net/ArtBIT/kneDX/ . Это должно направлять вас в правильном направлении

Я также хотел использовать этот метод для подписей, я нашел образец на http://codetheory.in/ .

Я добавил код ниже в jsfiddle

Html:

 

Javascript:

  (function() { var canvas = document.querySelector('#paint'); var ctx = canvas.getContext('2d'); var sketch = document.querySelector('#sketch'); var sketch_style = getComputedStyle(sketch); canvas.width = parseInt(sketch_style.getPropertyValue('width')); canvas.height = parseInt(sketch_style.getPropertyValue('height')); var mouse = {x: 0, y: 0}; var last_mouse = {x: 0, y: 0}; /* Mouse Capturing Work */ canvas.addEventListener('mousemove', function(e) { last_mouse.x = mouse.x; last_mouse.y = mouse.y; mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; }, false); /* Drawing on Paint App */ ctx.lineWidth = 5; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.strokeStyle = 'blue'; canvas.addEventListener('mousedown', function(e) { canvas.addEventListener('mousemove', onPaint, false); }, false); canvas.addEventListener('mouseup', function() { canvas.removeEventListener('mousemove', onPaint, false); }, false); var onPaint = function() { ctx.beginPath(); ctx.moveTo(last_mouse.x, last_mouse.y); ctx.lineTo(mouse.x, mouse.y); ctx.closePath(); ctx.stroke(); }; }()); 

Я думаю, что другие примеры здесь слишком сложны. Это проще и JS только …

 // create canvas element and append it to document body var canvas = document.createElement('canvas'); document.body.appendChild(canvas); // some hotfixes... ( ≖_≖) document.body.style.margin = 0; canvas.style.position = 'fixed'; // get canvas 2D context and set him correct size var ctx = canvas.getContext('2d'); resize(); // last known position var pos = { x: 0, y: 0 }; window.addEventListener('resize', resize); document.addEventListener('mousemove', draw); document.addEventListener('mousedown', setPosition); document.addEventListener('mouseenter', setPosition); // new position from mouse event function setPosition(e) { pos.x = e.clientX; pos.y = e.clientY; } // resize canvas function resize() { ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; } function draw(e) { // mouse left button must be pressed if (e.buttons !== 1) return; ctx.beginPath(); // begin ctx.lineWidth = 5; ctx.lineCap = 'round'; ctx.strokeStyle = '#c0392b'; ctx.moveTo(pos.x, pos.y); // from setPosition(e); ctx.lineTo(pos.x, pos.y); // to ctx.stroke(); // draw it! } 

Вот мой очень простой рабочий canvas и стирание.

https://jsfiddle.net/richardcwc/d2gxjdva/

 //Canvas var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //Variables var canvasx = $(canvas).offset().left; var canvasy = $(canvas).offset().top; var last_mousex = last_mousey = 0; var mousex = mousey = 0; var mousedown = false; var tooltype = 'draw'; //Mousedown $(canvas).on('mousedown', function(e) { last_mousex = mousex = parseInt(e.clientX-canvasx); last_mousey = mousey = parseInt(e.clientY-canvasy); mousedown = true; }); //Mouseup $(canvas).on('mouseup', function(e) { mousedown = false; }); //Mousemove $(canvas).on('mousemove', function(e) { mousex = parseInt(e.clientX-canvasx); mousey = parseInt(e.clientY-canvasy); if(mousedown) { ctx.beginPath(); if(tooltype=='draw') { ctx.globalCompositeOperation = 'source-over'; ctx.strokeStyle = 'black'; ctx.lineWidth = 3; } else { ctx.globalCompositeOperation = 'destination-out'; ctx.lineWidth = 10; } ctx.moveTo(last_mousex,last_mousey); ctx.lineTo(mousex,mousey); ctx.lineJoin = ctx.lineCap = 'round'; ctx.stroke(); } last_mousex = mousex; last_mousey = mousey; //Output $('#output').html('current: '+mousex+', '+mousey+'
last: '+last_mousex+', '+last_mousey+'
mousedown: '+mousedown); }); //Use draw|erase use_tool = function(tool) { tooltype = tool; //update }
 canvas { cursor: crosshair; border: 1px solid #000000; } 
    

Alco проверьте это:
Пример:
https://github.com/williammalone/Simple-HTML5-Drawing-App

Документация:
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Этот документ содержит следующие коды:

HTML:

  

JS:

 context = document.getElementById('canvas').getContext("2d"); $('#canvas').mousedown(function(e){ var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; paint = true; addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); redraw(); }); $('#canvas').mouseup(function(e){ paint = false; }); $('#canvas').mouseleave(function(e){ paint = false; }); var clickX = new Array(); var clickY = new Array(); var clickDrag = new Array(); var paint; function addClick(x, y, dragging) { clickX.push(x); clickY.push(y); clickDrag.push(dragging); } //Also redraw function redraw(){ context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas context.strokeStyle = "#df4b26"; context.lineJoin = "round"; context.lineWidth = 5; for(var i=0; i < clickX.length; i++) { context.beginPath(); if(clickDrag[i] && i){ context.moveTo(clickX[i-1], clickY[i-1]); }else{ context.moveTo(clickX[i]-1, clickY[i]); } context.lineTo(clickX[i], clickY[i]); context.closePath(); context.stroke(); } } 

И еще один удивительный пример
http://perfectionkills.com/exploring-canvas-drawing-techniques/

Дайте мне знать, если у вас возникнут проблемы с реализацией этого. Он использует processing.js и имеет функции для изменения цветов и увеличения точки рисования.

           

если у вас есть фоновое изображение для вашего canvasа, вам придется сделать некоторые настройки, чтобы он работал правильно, потому что белый стирающий трюк скроет фон.

вот суть с кодом.

      
Choose Color
Eraser
Interesting Posts

Каковы некоторые параметры шаблона шаблона?

Как преобразовать линейный переход ^ M в нормальный разрыв строки в файле, открытом в vim?

Удаленный модальный модуль Twitter загружает одно и то же содержимое каждый раз

Как остановить другие приложения, играющие музыку из моей текущей деятельности?

Выключение вывода консоли управления спящего режима

Как отключить клавиатуру?

TraceRoute и Ping в C #

Правый выравнивающий текст в PdfPCell

Как ядра в модуле AMD Bulldozer сравниваются с виртуальными ядрами Intel HTT и двумя отдельными ядрами с точки зрения производительности многозадачности?

Java API, чтобы узнать версию JDK для файла classа?

Как настроить параметр «ручное окно» VPN для сервера и клиента, чтобы разрешить спутниковое VPN-соединение?

Как добавить предложение where в инструкции MySQL Insert?

Автоматически создавать или обновлять копию в реальном времени на другом жестком диске всякий раз, когда файлы сохраняются в определенной папке

Выражение случая против случая

Библиотека SSH для Java

Давайте будем гением компьютера.