Error - Using Javascript and HTML canvases to make a mouse event drawing function [closed]

StackOverflow https://stackoverflow.com/questions/23074945

  •  03-07-2023
  •  | 
  •  

سؤال

I am new to HTML canvases, but I have verified all my code and functions, or thought I had, and yet there is still no output on my website. It's supposed to be like the khanacademy draw function, where the user can select html <input>s to change colors, widths, shapes, etc., and then move their mouse around the screen to draw that shape with that color...

I have no idea what is wrong, although when I 'inspect element' in Google Chrome, it says Uncaught SyntaxError: Unexpected identifier - games/drawing_shapes/js/draw_shapes.js:99. Line 99 is the very bottom one (mouse event function) and I'm guessing it means the $. I'm sorry this is so much code, but I'll try to organize it as best I can:

//   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);

Here is the html code:

<!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>

Maybe I need to put the script in the <head> tag, or after the <canvas>? I don't think that's it, though. Thanxxxxxxx a ton in advance for whoever contributes to this post and hopefully it is organized well and that i didn't make a silly mistake.

هل كانت مفيدة؟

المحلول

Just missing a paren to close the ready call.

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

Or you could move the mousemove setting inside the function. Either way, you need to close it and adding the semicolon is a good idea.

In response to your comment - I think you are also missing a call to connect your mousemove to a drawing routine. Just for fun, I added

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

in to your onMouseMove conditional block. It did what I expected.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top