0

我目前已经创建了一个简单的绘图应用程序，想知道是否有人可以帮助我编写代码，将特定的声音附加到颜色上，并且每次用户在画布上使用颜色进行绘图时，声音都会在绘图时播放。

谢谢！

这是我迄今为止用于绘图应用程序的 Javascript：

var started = false;
var canvas, context;
var stampId = '';
var lastColor = 'red';
var lastStampId = '';

function init() {
    canvas = $('#imageView').get(0);
    context = canvas.getContext('2d');

    // Auto-adjust canvas size to fit window.
    canvas.width  = window.innerWidth - 80 ;
    canvas.height = window.innerHeight - 80 ;

    //$('#container').get(0).addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('click', onClick, false);
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);

    // Add events for toolbar buttons.
    $('#red').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#orange').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#yellow').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#green').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#blue').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#purple').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);


    // Attach the mousedown, mousemove and mouseup event listeners.

  }

  // The pencil tool instance.
  tool = new tool_pencil();
  // This painting tool works like a drawing pencil which tracks the mouse 
  // movements.
  function tool_pencil () {
    var tool = this;
    this.started = false;

    // This is called when you start holding down the mouse button.
    // This starts the pencil drawing.
    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };

    // This function is called every time you move the mouse. Obviously, it only 
    // draws if the tool.started state is set to true (when you are holding down 
    // the mouse button).
    this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
    context.lineJoin = "round";
    context.lineWidth = 5;
      }
    };

    // This is called when you release the mouse button.
    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  }

  // The general-purpose event handler. This function just determines the mouse 
  // position relative to the canvas element.
  function ev_canvas (ev) {
    if (ev.layerX || ev.layerX ==0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 10 ) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    // Call the event handler of the tool.
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }



function onClick(e) {
    if (stampId.length > 0) {
        context.drawImage($(stampId).get(0), e.pageX - 90, e.pageY - 60, 80, 80);
    }
}

function onColorClick(color) {
    // Start a new path to begin drawing in a new color.
    context.closePath();
    context.beginPath();

    // Select the new color.
    context.strokeStyle = color;

    // Highlight selected color.
    var borderColor = 'white';
    if (color == 'white' || color == 'yellow') {
        borderColor = 'black';
    }

    $('#' + lastColor).css("border", "0px dashed white");
    $('#' + color).css("border", "1px dashed " + borderColor);

    // Store color so we can un-highlight it next time around.
    lastColor = color;
}

function onFill() {
    // Start a new path to begin drawing in a new color.
    context.closePath();
    context.beginPath();

    context.fillStyle = context.strokeStyle;
    context.fillRect(0, 0, canvas.width, canvas.height);
}

function onStamp(id) {
    // Update the stamp image.
    stampId = '#' + id;

    $(lastStampId).css("border", "0px dashed white");
    $(stampId).css("border", "1px dashed black");

    // Store stamp so we can un-highlight it next time around.
    lastStampId = stampId;  
}
4

1 回答 1

1 
<audio id="snd_red" src="red.mp3"></audio>
<audio id="snd_blue" src="blue.mp3"></audio>
...

snd = null;
playing = false;

canvas.addEventListener('mousedown', function(){
    if (snd && !playing) {
        playing = true;
        snd.play();
    }
}, false);

canvas.addEventListener('mouseup', function(){
    if (snd && playing) {
        snd.stop();
        snd = null;
        playing = false;
    }
}, false);

function onColorClick(e, color){
    snd = document.getElementById("snd_" + color);
}

您可以在 1 行中为所有颜色执行此操作：

$('#red,#blue,#green,...').bind('click', function(e) { onColorClick(e.target.id, $(this).attr("id")); }, false);

但甚至可以：

$('.color').bind('click', function(e) { onColorClick(e.target.id, $(this).attr("id")); }, false);

如果您可以为它们中的每一个添加 class="color" （但保持不变）

解决方案：

基本上我的回答有效，但你的代码有一些问题：

http://neswork.com/javascript/sound-draw/1st/（如你所愿：仅在溺水时发出声音）

http://neswork.com/javascript/sound-draw/2nd/（我喜欢：声音总是）

于 2012-04-11T19:37:06.887 回答