Wie Ändern der Fensterebene eines Bildes auf Leinwand mit JavaScript

Question

Ich habe ein Bild auf Leinwand oder eine Reihe von Bildern, die ich auf der Leinwand zeichnen. Ich kann sie gut zeichnen, aber ich möchte die Fensterebene des Bildes auf der Leinwand ändern, indem ich die Maus darüber ziehe. Ich habe viele externe Javascript APIs gesehen, aber sie sind ziemlich riesig und ich möchte sie nicht für diesen Zweck verwenden.

hier ist mein JSFIDDLE, die im Grunde auf der Leinwand ein Bild zeichnen

dies ist, wie mein Code

// Grab the Canvas and Drawing Context 
var canvas = document.getElementById('c'); 
var ctx = canvas.getContext('2d'); 



// Create an image element 
var img = document.createElement('IMG'); 

// When the image is loaded, draw it 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 

// Specify the src to load the image 
img.src = "http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample5_l.jpg"; 

i mit grundlegenden JS oder JQuery brauchen etwas aussieht. es wäre toll, wenn Sie mich mit einem Beispielcode in die richtige Richtung weisen könnten.

Vielen Dank im Voraus.

Answer 1

Wenn Sie JavaScript verwenden möchten, versuchen Sie so etwas wie:

<script> 
var c = document.getElementById("drawingboard"); 
var ctx = c.getContext("2d"); 
var mouseDown = 0; 
document.body.ontouchstart = function() { 
mouseDown+=1; 
} 
document.body.ontouchend = function() { 
mouseDown-=1; 
} 
function draw(event){ 
ctx.color='gold'; 
ctx.fillStyle = "lime"; 
ctx.drawImage(img,event.clientX,event.clientY);} 
</script>