Question

我是HTML画布的新手，但我已经验证了我的所有代码和功能，或者我已经认为，但我的网站上仍然没有输出。它应该像khanacademy draw函数，用户可以选择html <input>来更改颜色，宽度，形状等，然后在屏幕上移动鼠标以绘制该形状那种颜色......

我不知道出了什么问题，虽然当我在Google Chrome中“检查元素”时，却说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提前一吨，无论谁为这篇文章做出贡献，希望它组织得很好，而且我没有犯这个愚蠢的错误。

Answer 1

只是错过了一个paren关闭准备好的电话。

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

或者您可以在功能内移动鼠标移动设置。无论哪种方式，你需要关闭它并添加分号是一个好主意。

在回复您的评论时 - 我认为您也错过了将鼠标移动到绘图程序的调用。为了好玩，我添加了

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

进入你的onMouseMove条件块。它做到了我的预期。

错误 - 使用Javascript和HTML画布制作鼠标事件绘图功能

1 个答案: