錯誤 - 使用Javascript和HTML畫布製作鼠標事件繪圖功能

我是HTML畫布的新手，但我已驗證了我的所有代碼和功能，或者認爲我有過，但我的網站上仍然沒有輸出。它應該是像khanacademy draw功能，其中用戶可以選擇html <input> s來更改顏色，寬度，形狀等，然後移動鼠標在屏幕上繪製該顏色的形狀...錯誤 - 使用Javascript和HTML畫布製作鼠標事件繪圖功能

我不知道什麼是錯誤的，儘管當我在谷歌瀏覽器中檢查元素時，它說Uncaught SyntaxError: Unexpected identifier - games/drawing_shapes/js/draw_shapes.js:99。 99行是最下面的一個（鼠標事件函數），我猜它意味着$。我很抱歉這是這麼多的代碼，但我會盡力，盡我所能組織它：

// VARIABLES // 
//shapes 
var shape = "circle"; 
var shape_x; 
var shape_y; 
var shape_width = 10; 
var shape_height = 10; 
var circle_radius; 
var mouse_x; 
var mouse_y; 
var style = 'stroke'; 

//colors 
var colors = ["#FF0000", "#FF6600", "#FFFF00", "#00FF00", "#0066FF", "#CC0099",  "#663300", "#000000"]; //red orange yellow green blue purple brown black 
//I haven't added the html to give the user the option to edit colors and so forth, so I just use the color below, but I will use the above colors as options once I get the script figured out... 
var color = "#FF0000"; 
var background_color = "#FFFFFF"; 

//canvas 
var canvas; 
var canvas_width; 
var canvas_height; 
var canvas_min_x; 
var canvas_max_x; 
var canvas_min_y; 
var canvas_max_y; 

//context 
var ctx; 

//initialize 
var initialized = false; 

// FUNCTIONS // 
function setShapeTo(newShape) { 
    if (newShape == 'square' || 'circle') { 
     shape = newShape; 
    } else { 
     shape = 'circle'; 
    } 
} 
function drawCircle(x, y, r) { 
    ctx.beginPath(); 
    ctx.arc(x, y, r, 0, Math.PI * 2, true); 
    ctx.closePath(); 
    if (style = 'fill') { 
     ctx.fill(); 
    } else { 
     ctx.stroke(); 
    } 
} 
function drawSquare(x, y, w, h) { 
    ctx.beginPath(); 
    ctx.rect(x, y, w, h); 
    ctx.closePath(); 
    if (style = 'fill') { 
     ctx.fill(); 
    } else { 
     ctx.stroke(); 
    } 
} 
function reset() { 
    ctx.clearRect(0, 0, canvas_width, canvas_height); 
    drawRectangle(0, 0, canvas_width, canvas_height); 
} 
function drawStage() { 
    ctx.fillStyle = color; 
    ctx.strokeStyle = color; 
    circle_radius = shape_width/2; 
    /*shape_height = shape_width;*/ 
    if (shape == 'square') { 
     drawSquare(shape_x, shape_y, shape_width, shape_height); 
    } else { 
     drawCircle(shape_x, shape_y, circle_radius); 
    } 
} 
function initialize() { 
    canvas = document.getElementById('draw_shapes_canvas'); 
    ctx = canvas.getContext('2d'); 
    canvas_width = $("#draw_shapes_canvas").width(); 
    canvas_height = $("#draw_shapes_canvas").height(); 
    canvas_min_x = $("#draw_shapes_canvas").offset().left; 
    canvas_max_x = canvas_min_x + canvas_width; 
    canvas_min_y = $("#draw_shapes_canvas").offset().top; 
    canvas_max_y = canvas_min_y + canvas_height; 
    initialized = true; 
    /*interval_id = setInterval(drawStage(), 10);*/ 
} 
function onMouseMove(event) { 
    if (event.pageX > canvas_min_x && event.pageX < canvas_max_x && event.pageY > canvas_min_y && event.pageY < canvas_max_y && initialized == true) { 
     shape_x = Math.max(event.pageX - canvas_min_x - (shape_width/2), 0); 
     shape_x = Math.min(canvas_width - shape_width, shape_x); 
     shape_y = Math.max(event.pageY - canvas_min_y - (shape_height/2), 0); 
     shape_y = Math.min(canvas_height - shape_height, shape_y); 
    } 
} 
$(document).ready(function() { 
    initialize(); 
} 
$(document).mousemove(onMouseMove);

下面是HTML代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>MySite.com | Draw Shapes</title> 
    <link type="text/css" rel='stylesheet' href='css/draw_shapes-style.css'   media="screen"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    </script> 
</head> 
<body> 
    <script type="text/javascript" src="js/draw_shapes.js"></script> 
    <canvas id="draw_shapes_canvas" width="500" height="400">Your browser does not support this game structure.</canvas> 
</body> 
</html>

也許我需要把腳本在<head>標記中，還是在<canvas>之後？不過，我不認爲就是這樣。 Thanxxxxxxx提前一噸爲誰貢獻這個職位，並希望它組織得很好，我沒有犯一個愚蠢的錯誤。

來源

2014-04-15 BestAnswer

只是缺少一個paren來關閉就緒呼叫。

$(document).ready(function() { 
    initialize(); 
}); 
$(document).mousemove(onMouseMove);

或者你可以在功能中移動鼠標移動設置。無論哪種方式，你需要關閉它，並添加分號是一個好主意。

迴應你的評論 - 我想你也錯過了將鼠標移動到繪圖程序的電話。爲了好玩，我添加了

drawCircle(shape_x,shape_y,Math.random()*10);

進入你的onMouseMove條件塊。它做了我的預期。

來源

2014-04-15 04:58:41 DrC

哦，謝謝，但奇怪，它仍然無法正常工作......謝謝指出這一點，但。 – BestAnswer

U R最好的！非常感謝！奇蹟般有效！ – BestAnswer

錯誤 - 使用Javascript和HTML畫布製作鼠標事件繪圖功能

回答

相關問題