canvas刮刮乐(原创)

Html

Css

#image {
	position:absolute;
	left:10px;
	top:10px;
	width:300px;
	height:500px;
}
#canvas1 {
	position:absolute;
	left:10px;
	top:10px;
}

//获取canvas 
var canvas = document.getElementById("canvas1");
//获取绘图环境
var context = canvas.getContext("2d");

//绘制灰色蒙版
context.fillStyle = "gray";
context.fillRect(0, 0, canvas.width, canvas.height);

//设置组合方式
context.globalCompositeOperation = "destination-out";
//起点
var startX = 0;
var startY = 0;
context.lineWidth = "20";
context.lineCap = "round"
var endX = 0;
var endY = 0;
//保存
context.save();
//标识量
var isDown = false;
//down
canvas.onmousedown = function(e) {
    //记录起点
    startX = e.offsetX;
    startY = e.offsetY;
    isDown = true;

}
//up
canvas.onmouseup = function() {
    isDown = false;
}
//move
canvas.onmousemove = function(e) {
    //如果鼠标没有点下去 就结束方法 
    if (!isDown) {
        return;
    }
    //终点
    endX = e.offsetX;
    endY = e.offsetY;
    //
    context.moveTo(startX, startY);
    context.lineTo(endX, endY);
    //绘制
    context.strokeStyle = "red";
    context.stroke();
    //更新起点
    startX = endX;
    startY = endY;
    //判断百分比
    var b = BaiFenBi(0, 0, canvas.width, canvas.height);
    if (b > 40) {
        //隐藏
        canvas.style.display = "none";
    }

}

//获取百分比
function BaiFenBi(x, y, width, height) {
    //获取像素
    var imageData = context.getImageData(x, y, width, height);
    var piexls = imageData.data;
    var count = 0;
    //遍历所有的像素值
    for (var i = 0; i < piexls.length; i += 4) {
        //透明度 alpha
        var a = piexls[i + 3];
        //判断
        if (a < 128) {
            count++;
        }
    }
    //计算百分比,保留两位
    var b = ((count / (piexls.length / 4)) * 100).toFixed(2);
    return b;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas刮刮乐(原创)

代码描述：canvas刮刮乐效果代码

代码流程:
1. 准备一张图片img 和一个 canvas
2. 将img和canvas调整到同一个位置
3. 让canvas覆盖掉canvas
4. 监听鼠标移动事件,并在canvas画布上绘制线条
5. 通过canvas组合的特性, 显示出底部的img

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

culiuxiang

相关代码

canvas刮刮乐(原创)

最新