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