涂抹的效果怎么做？
誰知道 怎么做刮刮卡，涂抹的效果？思考題里 的最后一個。求代碼
曾紫歌
2016-08-31
4 回答
舉報
0/150
提交
取消
2018-10-29
用圖片創(chuàng)建pattern 作為 strokeStyle 能相對簡單的實現(xiàn)
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(); }2018-05-29
我這個效果實現(xiàn)了，思路不知道對不對，
<!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("結(jié)束動畫",radius)
? ? ? ? ? ? }
? ? ? ? ? ? drawClip(canvasWidth / 2, canvasHeight / 2, radius)
? ? ? ? }, 30)
? ? }
? ? // }
? ? </script>
</body>
</html>
2017-07-02
我的思路是借助
mousemove事件，把鼠標的經(jīng)過路徑（一個一個的x，y）放在一個數(shù)組里，這就是一條線....
在這條線上隨便取一些點畫圓，就出來手指涂抹效果了，不難。
代碼就沒興趣寫了。
2016-09-07
fifter:blur()