欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-03 19:25:16
本文实例为大家分享了html5 canvas在图片上画超链接的具体代码,供大家参考,具体内容如下 1. html

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

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