涂抹的效果怎么做？
谁知道 怎么做刮刮卡，涂抹的效果？思考题里 的最后一个。求代码
4 回答
用图片创建pattern 作为 strokeStyle 能相对简单的实现
var canvasWidth = 2000;
var canvasHeight = 1143;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var isMouseDown = false;
var imageReady = false;
var lastPoint = {x: 0, y: 0};
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var pattern ;
var image = new Image();
image.src = "image.jpg";
image.onload = function () {
imageReady = true;
pattern = context.createPattern(image,"no-repeat");
};
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: Math.round(x - bbox.left),
y: Math.round(y - bbox.top),
};
}
canvas.onmousedown = function (e) {
e.preventDefault();
isMouseDown = true;
lastPoint = windowToCanvas(e.clientX, e.clientY);
};
canvas.onmouseup = function (e) {
e.preventDefault();
isMouseDown = false;
};
canvas.onmouseout = function (e) {
e.preventDefault();
isMouseDown = false;
};
canvas.onmousemove = function (e) {
e.preventDefault();
if (isMouseDown) {
var curPoint = windowToCanvas(e.clientX, e.clientY);
imageLine(curPoint,lastPoint);
lastPoint = curPoint;
}
};
function imageLine(curPoint,lastPoint) {
context.beginPath();
context.moveTo(curPoint.x,curPoint.y);
context.lineTo(lastPoint.x,lastPoint.y);
context.strokeStyle=pattern;
context.lineWidth=20;
context.lineCap="round";
context.stroke();
}
我这个效果实现了，思路不知道对不对，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>像素级图像操作</title>
<style>
#main {
width: 1000px;
margin: 0 auto;
position: relative;
overflow: hidden;
height: 630px;
border:2px solid #fff;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#image {
display: block;
width: 100%;
position: absolute;
z-index: 0;
filter: blur(20px);
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
}
#canvasA {
display: block;
position: absolute;
}
#main a {
display: block;
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 5px;
background: #eee;
position: absolute;
bottom: 20px;
text-decoration: none;
color: black;
z-index: 2
}
#main a:nth-of-type(1) {
background: #eee;
right: 20px;
}
}
</style>
</head>
<body style="text-align:center;background:black">
<div id="main">
<img src="img.jpg" alt="" id="image">
<canvas id="canvasA">
您的浏览器不支持该效果
</canvas>
<a href="javascript:show();">显示</a>
</div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
var canvasWidth = 1000;
var canvasHeight = 630;
// window.onload = function() {
var canvasA = document.getElementById("canvasA");
var ctxA = canvasA.getContext("2d");
var onOff = false;
canvasA.width = canvasWidth;
canvasA.height = canvasHeight;
var radius = 100;
var image = new Image();
image.src = "img.jpg";
image.onload = function() {
canvasA.addEventListener("mousemove", drawCircle, false)
canvasA.addEventListener("mousedown", moveDown, false)
canvasA.addEventListener("mouseup", moveUp, false)
canvasA.addEventListener("mouseout", moveUp, false)
}
function drawCircle(e) {
var ev = ev || window.event;
var x = ev.clientX - canvasA.getBoundingClientRect().left;
var y = ev.clientY - canvasA.getBoundingClientRect().top;
if (onOff) {
if (radius < canvasHeight) {
drawClip(x, y, radius)
}
}
return false
}
function moveDown() {
onOff = true;
if (radius < canvasHeight) {
drawCircle()
}
}
function moveUp() {
onOff = false;
//console.log()
if (radius < canvasHeight) {
// ctxA.clearRect(0, 0, canvasWidth, canvasHeight)
}
}
function drawClip(x, y, r) {
//ctxA.clearRect(0, 0, canvasWidth, canvasHeight)
ctxA.save();
ctxA.beginPath();
ctxA.arc(x, y, r, 0, Math.PI * 2, false);
//ctxA.closePath();
ctxA.clip();
ctxA.drawImage(image, 0, 0, canvasWidth, canvasHeight)
ctxA.restore()
}
function show() {
var time = null;
clearInterval(time)
time = setInterval(function() {
radius += 10;
if (radius > canvasHeight) {
clearInterval(time);
//console.log("结束动画",radius)
}
drawClip(canvasWidth / 2, canvasHeight / 2, radius)
}, 30)
}
// }
</script>
</body>
</html>
举报
0/150
提交
取消
