JavaScript html5 canvas實(shí)現(xiàn)圖片上畫超鏈接
本文實(shí)例為大家分享了html5 canvas在圖片上畫超鏈接的具體代碼,供大家參考,具體內(nèi)容如下
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(); }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 支持ie和firefox杰奇翻頁函數(shù)
杰奇小說系統(tǒng)用到的翻頁函數(shù),支持firefox,官方自帶的模板不支持,這樣大家就可以用firefox瀏覽網(wǎng)頁了,在網(wǎng)頁木馬橫行的今天,firefox比ie要安全不少2008-07-07JavaScript中使用import 和require打包后實(shí)現(xiàn)原理分析
這篇文章主要介紹了JavaScript中使用import 和require打包后實(shí)現(xiàn)原理分析,需要的朋友可以參考下2018-03-03原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
本文給大家分享的是使用原生的javascript實(shí)現(xiàn)的響應(yīng)式的瀑布流布局的方法和源碼,非常的實(shí)用,有需要的小伙伴可以參考下。2015-04-04javascript中json對(duì)象json數(shù)組json字符串互轉(zhuǎn)及取值方法
這篇文章主要介紹了javascript中json對(duì)象json數(shù)組json字符串互轉(zhuǎn)及取值方法,需要的朋友可以參考下2017-04-04javascript實(shí)現(xiàn)數(shù)組去重的多種方法
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)數(shù)組去重的多種方法,感興趣的小伙伴們可以參考一下2016-03-03js實(shí)現(xiàn)的GridView即表頭固定表體有滾動(dòng)條且可滾動(dòng)
實(shí)現(xiàn)GridView,表頭固定,表體有滾動(dòng)條且可滾動(dòng),下面有個(gè)不錯(cuò)的示例,希望對(duì)大家有所幫助2014-02-02