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 相关文章推荐
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
jquery选择器使用详解
Apr 08 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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
PHP5中MVC结构学习
2006/10/09 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
python PyTorch预训练示例
2018/02/11 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
python中while和for的区别总结
2019/06/28 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
群众路线党课主持词
2014/04/01 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
MySQL数据库查询之多表查询总结
2022/08/05 MySQL