本文主要为大家详细介绍了JavaScript html5 canvas实现图片上画超链接,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。
本文实例为大家分享了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 html5 canvas实现图片上画超链接的详细内容。更多信息请关注PHP中文网其他相关文章!