错误 - 使用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画布制作鼠标事件绘图功能

回答

相关问题