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


Posted in Javascript onOctober 20, 2017

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

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

Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 #Javascript
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
移动端效果之IndexList详解
Oct 20 #Javascript
详解webpack性能优化——DLL
Oct 20 #Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 #Javascript
浅谈如何使用 webpack 优化资源
Oct 20 #Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 #jQuery
You might like
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
优化PHP程序的方法小结
2012/02/23 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
js实现div弹出层的方法
2014/11/20 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
使用Python对SQLite数据库操作
2017/04/06 Python
详解python单元测试框架unittest
2018/07/02 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
django如何实现视图重定向
2019/07/24 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
python怎么提高计算速度
2020/06/11 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python关于倒排列的知识点总结
2020/10/13 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
总经理驾驶员岗位职责
2013/12/04 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
农民工创业典型事迹
2014/01/25 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
求职信的正确写法
2014/07/10 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python