本文主要为大家详细介绍了JavaScript html5 canvas实现图片上画超链接，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

1. html

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();

}

相关推荐：