建站
咨询
售后
建站咨询
JavaScripthtml5canvas实现图片上画超链接
本文实例为大家分享了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();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
本文标题：JavaScripthtml5canvas实现图片上画超链接
文章位置：http://scgulin.cn/article/pecehg.html
