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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
ExtJS下grid的一些属性说明
Dec 13 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
js实现div色块拖动录制
Jan 16 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP令牌 Token改进版
2008/07/18 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
AngularJS内置指令
2015/02/04 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Python中反射和描述器总结
2018/09/23 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
python执行精确的小数计算方法
2019/01/21 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
通过实例学习Python Excel操作
2020/01/06 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
什么是会话Bean
2015/05/14 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
公司晚会策划方案
2014/05/17 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android