Zeichnen eines gefüllten Kreises in eine Leinwand, auf Mausklick

Will ich ziehen, einen ausgefüllten (oder nicht ausgefüllt) Kreis in eine Leinwand, auf Mausklick, aber ich kann nicht mein code, um richtig zu arbeiten, ich habe versucht so ziemlich alles!

Dies ist mein HTML:

<div id="images"></div>
<canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="250" height="250" onclick="draw(e)"></canvas>

und mein Aktuelles Skript:

var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");

function createImageOnCanvas(imageId) {
    canvas.style.display = "block";
    document.getElementById("images").style.overflowY = "hidden";
    var img = new Image(300, 300);
    img.src = document.getElementById(imageId).src;
    context.drawImage(img, (0), (0)); //onload....
}

function draw(e) {
    var pos = getMousePos(canvas, e);
    posx = pos.x;
    posy = pos.y;
    context.fillStyle = "#000000";
    context.arc(posx, posy, 50, 0, 2 * Math.PI);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

Der code funktioniert Prima, wenn, und nur wenn ich entfernen Sie die "use strict";, aber in dieser Arbeit habe ich, um einen code, der funktioniert sogar mit ihm, das ist mein problem.

Hier ist die jsFiddle

InformationsquelleAutor Davy Karlsson | 2013-12-11

  1. 14

    Gelöst, es selbst.

    function draw(e) {

    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    var rect = canvas.getBoundingClientRect();
    var posx = e.clientX - rect.left;
    var posy = e.clientY - rect.top;

    context.fillStyle = "#000000";
    context.beginPath();
    context.arc(posx, posy, 50, 0, 2 * Math.PI);
    context.fill();
}

    Dieses Skript funktioniert für mich.

    InformationsquelleAutor Davy Karlsson

Schreibe einen Kommentar