当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript html5 canvas实现图片上画超链接

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

2017年10月21日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了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(); 
    }

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网