您的位置：首页 > 移动开发

canvas实现移动端刮刮卡

2020-04-25 07:24 871 查看

文章目录

  • 覆盖合成
  • 实现刮刮卡
  • 后记

    • 实现刮刮卡

    了解canvas的透明设置

    ImageData对象

    ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：

    width:
    图片宽度，单位是像素
    height:
    图片高度，单位是像素
    data:
    Uint8ClampedArray类型的一维数组，
    包含着RGBA格式的整型数据，范围在0至255之间（包括255）
    R:0 --> 255(黑色到白色)
    G:0 --> 255(黑色到白色)
    B:0 --> 255(黑色到白色)
    A:0 --> 255(透明到不透明)

    得到场景像素数据

    getImageData():
    获得一个包含画布场景像素数据的
    ImageData
    对像,它代表了画布区域的对象数据

    ctx.getImageData(sx, sy, sw, sh)

    sx:
    将要被提取的图像数据矩形区域的左上角 x 坐标。
    sy:
    将要被提取的图像数据矩形区域的左上角 y 坐标。
    sw:
    将要被提取的图像数据矩形区域的宽度。
    sh:
    将要被提取的图像数据矩形区域的高度。

    全局透明度的设置

    globalAlpha = value

    这个属性影响到 canvas 里所有图形的透明度，
    有效的值范围是 0.0 （完全透明）到 1.0（完全不透明）
    默认是 1.0

    覆盖合成

    source:
    新的图像(源)
    destination:
    已经绘制过的图形(目标)
    globalCompositeOperation

    source-over
    (默认值):源在上面,新的图像层级比较高
    source-in :
    只留下源与目标的重叠部分(源的那一部分)
    source-out :
    只留下源超过目标的部分
    source-atop:
    砍掉源溢出的部分
    . 
    destination-over:
    目标在上面,旧的图像层级比较高
    destination-in:
    只留下源与目标的重叠部分(目标的那一部分)
    destination-out:
    只留下目标超过源的部分
    destination-atop:
    砍掉目标溢出的部分

    实现刮刮卡

    <!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></meta>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html,
body {
height: 100%;
overflow: hidden;
}

#wrap,
ul,
ul>li {
height: 100%;
}

ul>li {
background: url(img/b.png);
background-size: 100% 100%;
}

canvas {
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
</style>
</head>

<body>
<div id="wrap">
<canvas></canvas>
<ul>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var canvas = document.querySelector("canvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "img/a.png";
img.onload = function() {
draw();
}

function draw() {
var flag = 0;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

canvas.addEventListener("touchstart", function(ev) {
ev = ev || event;
var touchC = ev.changedTouches[0];

var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;

ctx.globalCompositeOperation = "destination-out";
ctx.lineWidth = 40;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.save();
ctx.beginPath();
//						ctx.arc(x,y,20,0,360*Math.PI/180);
ctx.moveTo(x, y);
ctx.lineTo(x + 1, y + 1)
ctx.stroke();
ctx.restore();
})

canvas.addEventListener("touchmove", function(ev) {
ev = ev || event;
var touchC = ev.changedTouches[0];

var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;

ctx.save();
//						ctx.arc(x,y,20,0,360*Math.PI/180);
ctx.lineTo(x, y)
ctx.stroke();
ctx.restore();
})

canvas.addEventListener("touchend", function() {
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
var allPx = imgData.width * imgData.height;
for (var i = 0; i < allPx; i++) {
if (imgData.data[4 * i + 3] === 0) {
flag++;
}
}

if (flag >= allPx / 2) {
canvas.style.opacity = 0;
}
})

canvas.addEventListener("transitionend", function() {
this.remove();
})
}
}
}
</script>

</html>

    后记

    喜欢我的小伙伴可以关注我哦，分享学习笔记，相互交流 ↓↓↓↓↓↓↓

    • 点赞
    • 收藏
    • 分享
    • 文章举报
    妙趣前端 发布了75 篇原创文章 · 获赞 197 · 访问量 1万+ 私信 关注
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航