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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
js编写的treeview使用方法
Nov 11 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
通过layer实现可输入的模态框的例子
Sep 27 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
django加载本地html的方法
2018/05/27 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
护士毕业自我鉴定
2014/02/07 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
生活小常识广播稿
2015/08/19 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python