JavaScript, HTML5 und Canvas implementieren das Zeichnen von Hyperlinks auf Bildern

Dieser Artikel stellt hauptsächlich JavaScript-HTML5-Canvas vor, um das Zeichnen von Hyperlinks auf Bildern im Detail zu realisieren. Ich hoffe, dass er allen helfen kann.

1. HTML

<canvas id="canvasFile" style="margin-top:15px;" width="500" height="400"></canvas> 
<input type="button" id="btnRedo" value="Re-Draw" class="btn btn-warning"/>

2. Javascript

var photoW = 400; 
    var photoH = 300; 
    var photo; 
     
     
    // logic load image into canvas 
    // ... 
    // e.g.  
    // photo = new Image(); 
    // photo.onload = function() { 
    // draw photo into canvas when ready 
    // ctx.drawImage(photo, 0, 0, photoW, photoH); 
    // }; 
    // load photo into canvas 
    // photo.src = picURL; 
   
     
 // canvas highlight 
    var canvas = document.getElementById('canvasFile'), 
      ctx = canvas.getContext('2d'), 
      img = new Image; 
    var btnDone = document.getElementById('btnDone'); 
    var btnRedo = document.getElementById('btnRedo'); 
 
 
    ctx.strokeStyle = '#FF0000'; 
 
    function DrawDot(x, y) { 
      var centerX = x; 
      var centerY = y; 
      var radius = 2; 
 
 
      ctx.beginPath(); 
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
      ctx.fillStyle = 'red'; 
      ctx.fill(); 
      ctx.lineWidth = 2; 
      ctx.strokeStyle = '#FF0000'; 
      ctx.stroke(); 
    } 
 
 
    function startDrawing() { 
      ctx.drawImage(img, 0, 0, photoW, photoH); 
      canvas.onmousemove = mousemoving; 
      canvas.onmousedown = mousedownhandle; 
      canvas.onmouseup = mouseuphandle; 
      // ## mobile events 
      //touchstart – to toggle drawing mode “on” 
      //touchend – to toggle drawing mode “off” 
      //touchmove – to track finger position, used in drawing 
      canvas.addEventListener('touchmove', touchmove, false); 
      canvas.addEventListener('touchend', mouseuphandle, false); 
 
 
      btnRedo.onclick = function (e) { 
        ctx.clearRect(0, 0, ctx.width, ctx.height); 
        ctx.drawImage(photo, 0, 0, photoW, photoH); 
        savedrawing(); 
      } 
    } 
    function savedrawing(e) { 
      var image = document.getElementById('canvasFile').toDataURL("image/jpeg"); 
      image = image.replace('data:image/jpeg;base64,', ''); 
      $("#imgNric1").val(image); 
    }; 
 

    function mousemoving(e) { 
      if (drawing) { 
        mousedownhandle(e); 
      } 
    } 
 
 
    var drawing = false; 
 
 
    function mousedownhandle(e) { 
      drawing = true; 
      var r = canvas.getBoundingClientRect(), 
        x = e.clientX - r.left, 
        y = e.clientY - r.top; 
 
 
      DrawDot(x, y); 
    }  
 
    function mouseuphandle(e) { 
      savedrawing(); 
      e.preventDefault(); 
      drawing = false; 
       
    } 
  
 
    //// mobile touch events 
    function touchmove(e) { 
      if (e.clientX > 800) { 
        mousedownhandle(e); 
        return; 
      } 
 
      var r = canvas.getBoundingClientRect(), 
        //event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY; 
        x = e.changedTouches[0].pageX - r.left, 
        y = e.changedTouches[0].pageY - r.top; 
 
 
      DrawDot(x, y); 
      e.preventDefault(); 
    }

Verwandte Empfehlungen ：

Hyperlink-Tag in HTML

So entfernen Sie die Hyperlink-Unterstreichung in CSS

js, um die Seite zu implementieren Laden Ausführliche Erläuterung von Beispielen für das automatische Auslösen von Hyperlinks

Das obige ist der detaillierte Inhalt vonJavaScript, HTML5 und Canvas implementieren das Zeichnen von Hyperlinks auf Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!