How to work external javascript in ASP.NET SignalR? -
i new asp.net signalr , trying allow number of users draw on canvas. drawing logic in separate js file , not understand how it....
here html code
<html lang="en"> <head> <title>finger painting</title> <script src="~/scripts/draw.js"></script> </head> <body> <div> <canvas id="canvas" width="1000" height="500" style="background-color:white"> browser not support html 5 canvas. </canvas> </div> < div> <p>color selected: <span id="color_chosen">black</span></p> <p> <input type="button" id="black" /> </p> <p><input type="button" id="reset_image" value="reset drawing"/></p> </div> </body> </html> here javascript code draw on canvas:
window.addeventlistener('load', eventwindowloaded, false); function eventwindowloaded() { canvasapp(); } function canvasapp() { var c = document.getelementbyid('canvas'); var context = c.getcontext('2d'); var blackbutton = document.getelementbyid("black"); var colorchosen = document.getelementbyid("color_chosen"); var resetbutton = document.getelementbyid("reset_image"); blackbutton.addeventlistener('click', colorpressed, false); drawscreen(); function drawscreen() { c.addeventlistener('mousedown', mouse_pressed_down, false); c.addeventlistener('mousemove', mouse_moved, false); c.addeventlistener('mouseup', mouse_released, false); c.addeventlistener('touchmove', touch_move_gesture, false); context.fillstyle = 'white'; context.fillrect(0, 0, c.width, c.height); context.strokestyle = '#000000'; context.strokerect(1, 1, c.width - 2, c.height - 2); } var begin_drawing = false; function mouse_pressed_down(ev) { begin_drawing = true; context.fillstyle = colorchosen.innerhtml; } function mouse_moved(ev) { var x, y; x = ev.pagex; y = ev.pagey; if (begin_drawing) { context.beginpath(); context.arc(x, y, 7, (math.pi / 180) * 0, (math.pi / 180) * 360, false); context.fill(); context.closepath(); } } function mouse_released(ev) { begin_drawing = false; } function touch_move_gesture(ev) { var x, y; ev.preventdefault(); context.beginpath(); context.fillstyle = colorchosen.innerhtml; if (ev.touches.length == 1) { var touch = ev.touches[0]; x = touch.pagex; y = touch.pagey; context.arc(x, y, 7, (math.pi / 180) * 0, (math.pi / 180) * 360, false); context.fill(); } } function colorpressed(e) { var color_button_selected = e.target; var color_id = color_button_selected.getattribute('id'); colorchosen.innerhtml = color_id; } function resetpressed(e) { c.width = c.width; // reset grid drawscreen(); } } anyone idea?
Comments
Post a Comment