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 parseInt与Number函数的区别
Jan 21 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 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打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
php-msf源码详解
2017/12/25 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
php中数组最简单的使用方法
2020/12/27 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
现场施工员岗位职责
2014/03/10 职场文书
付款委托书范本
2014/04/04 职场文书
委托书的样本
2015/01/28 职场文书
党员个人总结范文
2015/02/14 职场文书
辛亥革命观后感
2015/06/02 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python