javascript - drawing line on canvas that's "round" -


i have code allows me draw line on canvas

var canvas, ctx, flag = false, prevx = 0, currx = 0, prevy = 0, curry = 0, dot_flag = false;  var x = "black", y = 10;  function initialize() {     canvas = document.getelementbyid('can');      const bounds = canvas.getboundingclientrect();     canvas.width = bounds.width;     canvas.height = bounds.height;      ctx = canvas.getcontext("2d");      w = canvas.width;     h = canvas.height;      canvas.addeventlistener("mousemove", function (e) {         findxy('move', e)     }, false);     canvas.addeventlistener("mousedown", function (e) {         findxy('down', e)     }, false);     canvas.addeventlistener("mouseup", function (e) {         findxy('up', e)     }, false);     canvas.addeventlistener("mouseout", function (e) {         findxy('out', e)     }, false); }  function draw(e) {     ctx.beginpath();     ctx.moveto(prevx, prevy);     ctx.lineto(currx, curry);     ctx.strokestyle = x;     ctx.linewidth = y;     ctx.stroke();     ctx.closepath(); }  function getmousepos(canvas, evt) {     var rect = canvas.getboundingclientrect();     return {       x: evt.clientx - rect.left,       y: evt.clienty - rect.top     }; }  function findxy(res, e) {     var pos = getmousepos(canvas, e);     if (res == 'down') {         prevx = currx;         prevy = curry;          currx = pos.x;         curry = pos.y;          flag = true;         dot_flag = true;         if (dot_flag) {             ctx.beginpath();             ctx.fillstyle = x;             ctx.fillrect(currx, curry, 2, 2);             ctx.closepath();             dot_flag = false;         }     }     if (res == 'up' || res == "out") {         flag = false;     }     if (res == 'move') {         if (flag) {             prevx = currx;             prevy = curry;             currx = pos.x;             curry = pos.y;             draw();         }     } }

with high no y 10 line get's drawn thick horizontal line, know can draw circular line, site autodraw can make nice sketches there.

here's screen record of type of lines makes https://www.youtube.com/watch?v=e0sdfldab6u&feature=youtu.be

draw arc before drawing line. make drawn line "round".

var canvas, ctx, flag = false,     prevx = 0,     currx = 0,     prevy = 0,     curry = 0,     dot_flag = false;    var x = "black",     y = 5;  initialize()    function initialize() {     canvas = document.getelementbyid('can');       const bounds = canvas.getboundingclientrect();     canvas.width = bounds.width;     canvas.height = bounds.height;       ctx = canvas.getcontext("2d");       w = canvas.width;     h = canvas.height;       canvas.addeventlistener("mousemove", function(e) {        findxy('move', e)     }, false);     canvas.addeventlistener("mousedown", function(e) {        findxy('down', e)     }, false);     canvas.addeventlistener("mouseup", function(e) {        findxy('up', e)     }, false);     canvas.addeventlistener("mouseout", function(e) {        findxy('out', e)     }, false);  }    function draw(e) {     //arc     ctx.beginpath();     ctx.arc(currx, curry, y, 0, math.pi * 2);     ctx.fillstyle = x;     ctx.fill();     //line     ctx.beginpath();     ctx.moveto(prevx, prevy);     ctx.lineto(currx, curry);     ctx.linewidth = y * 2;     ctx.strokestyle = x;     ctx.stroke();  }    function getmousepos(canvas, evt) {     var rect = canvas.getboundingclientrect();     return {        x: evt.clientx - rect.left,        y: evt.clienty - rect.top     };  }    function findxy(res, e) {     var pos = getmousepos(canvas, e);     if (res == 'down') {        prevx = currx;        prevy = curry;          currx = pos.x;        curry = pos.y;          flag = true;        dot_flag = true;        if (dot_flag) {           ctx.beginpath();           ctx.fillstyle = x;           ctx.fillrect(currx, curry, 2, 2);           ctx.closepath();           dot_flag = false;        }     }     if (res == 'up' || res == "out") {        flag = false;     }     if (res == 'move') {        if (flag) {           prevx = currx;           prevy = curry;           currx = pos.x;           curry = pos.y;           draw();        }     }  }
canvas { border: 1px solid }
<canvas id="can" width="200" height="200"></canvas>


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more