画布涂抹效果
html和css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
canvas {
z-index: 100;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="375">
</canvas>
<script type="text/javascript" src='erase.js'></script>
<script type="text/javascript">
erase('canvas');
</script>
</body>
</html>
js
var erase = function (id) {
var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
// alert('加载');
ctx.drawImage(img, 0, 0);
}
img.src = "image/a.jpg";
// 将图片画到canvas
ctx.drawImage(img, 0, 0);
var offsetX = canvas.offsetLeft;
var offsetY = canvas.offsetTop;
var mousedown = false;
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
// 在目标图像顶部显示源图像
ctx.globalCompositeOperation = 'source-atop';
function eventDown(e) {
e.preventDefault();
mousedown = true;
}
function eventUp(e) {
e.preventDefault();
mousedown = false;
}
function eventMove(e) {
e.preventDefault();
if (mousedown) {
if (e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;
var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(x, y, 20, 0, Math.PI * 20);
ctx.fill();
}
}
canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
}
sonunda teknoloji ilerledi de bunu da yaptilar ??
Arkadaslar bu siteye dün giris yaptim ama 2 3 saat degil benim takipçilerim 12 saat sonra geldi sanirim herkes farkli??
Guys, it doesn’t matter when you come, I think the time doesn’t matter, does it come after you log in to the site, never mind the rest.
It’s really amazing what’s up 🙂
I never thought I would see people who viewed my profile on twitter 🙂
good to know that ??
Oh, 1000 Followers came after 1 hour ??
I had a broken day but now I’m happy
Who I See Who
I had a broken day but now I’m happy
I Learned My Secret Admirers
finally technology has advanced and they did it too ??
Sevdigim çocugu stalkliyordum umarim beni görmez ??????
bu uygulamayi kim yaptiysa ellerine saglik ????????????
Neegggggggggggggg
I never thought I would see people who viewed my profile on twitter 🙂
my followers have arrived thank you??
thanks??
my followers have arrived thank you??