Холст HTML5 с динамическим пользовательским вводом

Начну с того, что я никогда не использовал холст раньше, поэтому я не знаю, возможно ли это, но я не могу найти решение.Холст HTML5 с динамическим пользовательским вводом

Я пытаюсь создать холст, который рисует простую форму обычного многоугольника (все стороны равны) в холсте на основе количества сторон и размера многоугольника, который пользователь вводит, скорее всего, в форме HTML/PHP. Ничто не сохраняется на сервере или базе данных, просто используется для одного чертежа.

У кого-нибудь есть совет?

источник

2012-06-30 CampSoup1988

Вы должны использовать библиотеку JavaScript, чтобы упростить рисование на холсте.

Вот очень хорошая демонстрация функциональных возможностей, что вы ищете:

http://fabricjs.com/

И библиотека Fabric.js, который вы можете скачать здесь: http://fabricjs.com/

источник

2012-06-30 01:38:51

Глядя на демо, то есть именно то, что я ищу! Спасибо за такой быстрый ответ. Я попробую это завтра, когда я получу на своем компьютере – CampSoup1988

@ CampSoup1988 Нет проблем. Рад, что смог помочь. –

Я смотрел на google и был интересный tutorial/code, который рисует правильный многоугольник с n-сторонами размером &. Поэтому я подумал о том, чтобы сделать из нее какую-то функцию. Одна из технических проблем, с которыми я столкнулась, заключается в том, что когда холст рисуется, и я нажимаю, чтобы нарисовать еще один холст, второй холст «перезаписан» на первом. К счастью, кто-то here решил эту проблему, очистив холст.

Так вот мой код, вы можете изменить его для своих нужд:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Regular Polygon</title> 
</head> 
<body> 
    <canvas id="regular_polygon" width="400" height="400"></canvas> 

    <p>Polygon drawer:</p> 
    <p>Number of sides <input type="text" id="nSides"></p> 
    <p>Size <input type="text" id="size"></p> 
    <p>Color <input type="text" id="color"></p> 
    <p>Width <input type="text" id="width"></p> 
    <button id="draw">Draw!</button> 

    <script type="text/javascript"> 
    function polygon (element_id, nSides, psize, pcolor, pwidth) { 
     var c = document.getElementById(element_id); 
     c.width = c.width; 
     var cxt = c.getContext("2d"); 
     var numberOfSides = nSides, 
      size = psize, 
      Xcenter = c.width/2, 
      Ycenter = c.height/2; 

     cxt.beginPath(); 
     cxt.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0)); 

     for (var i = 1; i <= numberOfSides;i += 1) { 
     cxt.lineTo (
      Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides), 
      Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides) 
     ); 
     } 

     cxt.strokeStyle = pcolor; 
     cxt.lineWidth = pwidth; 
     cxt.stroke(); 
    } 

    (function() { 
     polygon("regular_polygon", 3, 40, "#000000", 2); 
     document.querySelector('#draw').addEventListener('click', function (e) { 
     e.preventDefault(); 
     var nSides = document.querySelector('#nSides'), 
      size = document.querySelector('#size'), 
      color = document.querySelector('#color'), 
      width = document.querySelector('#width'); 

     polygon("regular_polygon", nSides.value, size.value, color.value, width.value); 
     }); 
    })(); 
    </script> 
</body> 
</html>

источник

2012-06-30 02:57:44 HamZa

Я попытался реализовать этот скрипт так, как мне понравилось, как он не требует внешнего файла javascript, и мне не нужно было беспокоиться о дополнительных излишествах, которые мне не нужны в fabricjs, но когда я попытался добавить круг (дугу) к сценарий, теперь я получаю пустой холст. Любые предложения, пожалуйста? Вот мои модификации: http://jsfiddle.net/campsoup1988/VGfcz/ – CampSoup1988

Я также хотел спросить, можно ли отправить форму, просто нажав enter, когда одно из полей ввода имеет фокус (например, в html/php form) – CampSoup1988

Я еще не включил многоугольник, но мне удалось заставить круг работать (и немного упростить этот скрипт) http://jsfiddle.net/campsoup1988/TeGGx/89/ – CampSoup1988

Холст HTML5 с динамическим пользовательским вводом

ответ

Смежные вопросы