JavaScript html5 canvas实现图片上画超链接

本文实例为大家分享了html5 canvas在图片上画超链接的具体代码，供大家参考，具体内容如下

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();
    }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。