原生JS+HTML5Canvas实现橡皮擦效果(原创)

Html

Css


    
    首次图片加载中...

* {
	margin:0;
	padding:0;
}
.clear {
	clear:both;
}
.xpcbox {
	position:relative;
	max-width:500px;
	margin:0 auto;
}
.xpcbox img {
	max-width:100%;
	float:left;
}
.xpcbox .mask {
	display:none;
}
.xpcbox canvas {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.xpcbox .maskloding {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff;
	text-align:center;
}

function draw_img() {
    var div = document.getElementById("xpcbox");
    var mask = document.getElementById("mask");
    var canvas = document.getElementById('tutorial');
    canvas.width = div.offsetWidth;
    canvas.height = div.offsetHeight;
    var ctx = canvas.getContext("2d");
    var w = canvas.width;
    var h = canvas.height;
    ctx.drawImage(mask, 0, 0, w, h);
}

function draw_clear(x, y, pw, ph) {
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    var w = canvas.width;
    var h = canvas.height;
    ctx.clearRect(x, y, pw, ph);
}

function dodraw_clear(e, pw, ph) {
    var x = e.offsetX - pw / 2;
    var y = e.offsetY - ph / 2;
    draw_clear(x, y, pw, ph);
}
var img = document.getElementById("mask");
img.onload = function() {
    draw_img();
    document.getElementById("maskloding").style.display = "none";
}

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

立即下载

原生JS+HTML5Canvas实现橡皮擦效果(原创)

代码描述：非常简易的原生JS+HTML5Canvas实现橡皮擦

非常简洁自行修改使用

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Can＇t Be Defeated

相关代码

原生JS+HTML5Canvas实现橡皮擦效果(原创)

最新