本文实例为大家分享了html5 canvas在图片上画超链接的具体代码，供大家参考，具体内容如下
1. html
2. javascript
// logic load image into canvas
// ...
// e.g.
// photo = new Image();
// photo.onload = function() {
// draw photo into canvas when ready
// ctx.drawImage(photo,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,2 * Math.PI,false);
ctx.fillStyle = 'red';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = '#FF0000';
ctx.stroke();
}
function startDrawing() {
ctx.drawImage(img,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,ctx.width,ctx.height);
ctx.drawImage(photo,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();
} 