Question

我是asp.net signalR的新手，我试图允许多个用户在画布上绘图。绘图逻辑在一个单独的js文件中，我不明白该怎么做....

这是我的HTML代码

<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">
  Your browser does not support the 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>

这是我在画布上绘制的javascript代码：

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();
 }
 }

有人有想法吗？

如何在ASP.NET SignalR中使用外部JavaScript？

0 个答案: