涂抹的效果怎么做？-慕课网

首页课程实战体系课手记专栏慕课教程

涂抹的效果怎么做？

来源：3-5 思考，扩展

曾紫歌

2016-08-31 11:21

谁知道怎么做刮刮卡，涂抹的效果？思考题里的最后一个。求代码

写回答关注

4回答

Ah__: 2018-10-29 11:49:37

用图片创建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();

}

0 1

素食蚊子

2018-05-29 15:39:48

我这个效果实现了，思路不知道对不对，
<!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 0
ThinkSummer

2017-07-02 20:42:26

我的思路是借助
mousemove事件，把鼠标的经过路径（一个一个的x，y）放在一个数组里，这就是一条线....
在这条线上随便取一些点画圆，就出来手指涂抹效果了，不难。
代码就没兴趣写了。

0 0
我叫龙龙

2016-09-07 16:07:53

fifter:blur()

0 0

Canvas玩儿转红包照片

教你玩儿转微信红包照片模糊效果，图像展示效果，深入了解canvas

55911 学习 · 67 问题

查看课程

相似问题

效果展示～～

回答 1

点完show 之后立即点reset ,reset 的效果也是show的效果，大家遇到过没？？？？

回答 5

裁剪没有效果，求大神解答

回答 1

怎么不共享demo出来

回答 2

谁教我一下怎么让显示的圆从无到有逐渐变大

回答 2

打开慕课网App查看更多内容