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 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
canvas实现图像截取功能
Feb 06 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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
很好用的PHP数据库类
2009/05/27 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
django站点管理详解
2017/12/12 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python反编译学习之字节码详解
2019/05/19 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
详解Python 最短匹配模式
2020/07/29 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
生物科学专业职业规划书范文
2014/02/11 职场文书
经典团队口号
2014/06/06 职场文书
八项规定对照检查材料
2014/08/31 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis