Question

我正在制作一个javascript画布绘图程序，我希望用户能够在按键上选择铅笔工具，圆形工具和清除屏幕。

在以下代码中，变量key_press保存用户选择。当我没有为变量赋值时，整个程序不起作用，所以我设置了默认值= pencil（）。但是现在除了铅笔之外我什么都不能用。我在此处仅发布相关代码，但在此jsfiddle

中已填满

      var canvas, context, tool, key_press;

      // check for key press
    window.addEventListener('keydown',function(event){
           key_press= String.fromCharCode(event.keyCode);         
       },false);

    function init () {
      canvas = document.getElementById('canvas');
      context = canvas.getContext('2d');

                //check user selection
            if (key_press === "1") {
                tool = new Pencil();
            } else if (key_press === "2") {
                tool = new Circle();
            } else if (key_press === "3") {
                canvas.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);  
                tool = new Pencil();
            } else tool = new Pencil();  //this part is probably causing the problem, but clear screen (selection 3) does not work either so it could be something different.

         //onmouse calls and end of init()
    }

    //basically just two functions after init for the tools

    function Pencil () {
    //...
    }

    function Circle() {
    //...
    }

    //calling main function init()
    init();

显然我处理用户输入的方式很糟糕。你能指出我正确的方向吗？

Answer 1

您的距离计算不起作用，因为您在第二次, 2来电中没有Math.pow。你的jsfiddle没有工作，因为新小提琴的默认值是在window.load中运行，但是你添加了另一个从未触发的加载事件监听器。

我已更改代码以反映这些更改（并使context.arc调用使用距离而不是z）并且它似乎有效：

http://jsfiddle.net/rWV5h/1/

在Javascript中按键上的绘图工具选择

1 个答案: