本文主要为大家详细介绍了javascript 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();
}
相关推荐：
html里的超链接标签
css怎么去掉超链接下划线
js实现页面加载时自动触发超链接实例详解
以上就是javascript、html5、canvas实现图片上画超链接的详细内容。