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 相关文章推荐
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
JS实现瀑布流效果
Mar 07 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python实现树形打印目录结构
2018/03/29 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
心理健康教育制度
2014/01/27 职场文书
国际金融专业自荐信
2014/07/05 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
工厂见习报告范文
2014/10/31 职场文书
房产遗嘱范本
2015/08/06 职场文书