前端ABC<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>qdabc.cn</title>
<style>
body{ padding: 80px; background: #fff;}
*{ box-sizing: border-box;}
.con{ width:400px; height: 200px; background: #AAAAAA; position: relative; cursor: cell; text-align: center;
margin:20px auto;}
.text{ display: none; width:100%; height: 100%; text-align: center; color: #2244EE;font-size: 80px;
font-weight: bold; font-family: simsun; line-height: 200px;}
</style>
</head>
<body>
<div id="container1" class="con">
<span class="text">国际玩笑</span>
</div>
<div id="container2" class="con">
<span class="text">世界大事</span>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script>
/**
* 刮刮乐插件
*/
$.fn.wqzGgl?console.error("jQuery插件冲突！\n 冲突原因：命名空间重复:$.fn.wqzGgl"):
(function($){
$.fn.wqzGgl = function(options,param){
// 执行对外开放的方法
if (typeof options === "string"){
var state = this.data("_wqzGgl");
var method;
if (state){ // 当前对象已被初始化过
method = $.fn._wqzGgl.methods[options];
if (method){ // 插件中存在此方法
return method(this,param);
}else{
console.error("错误：_wqzGgl插件未提供此方法："+options);
}
return this;
}else{
console.error("错误："+this[0].outerHTML+"元素尚未被_wqzGgl插件渲染过！无法调用方法："+options);
}
return this;
}
// 渲染插件
return this.each(function(){
var _options = $.extend(true,{},$.fn.wqzGgl.defaultSettings,options||{});
var plugin = new wqzGgl(_options,$(this));
plugin.generate();
$(this).data("_wqzGgl",plugin);
});
}
// 默认配置
$.fn.wqzGgl.defaultSettings = {
coverBg: "#CCCCCC"
};
// 对外方法
$.fn.wqzGgl.methods = {
};
// 插件对象
function wqzGgl(_options,$elem){
this._options = _options;
this.$elem = $elem; // 目标对象
this.domWidth = $elem.innerWidth(); // 目标元素宽度
this.domHeight = $elem.innerHeight(); // 目标元素高度
this.enableClear = false; // 是否允许擦除
this.startPoint = {x:0,y:0}; // 起始点
this.lineWidth = 15; // 擦除时线的宽度
this.canvas; // 新增的canvas对象
this.ctx; // canvas对应的CanvasRenderingContext2D环境
};
/*
* 插件对象原型扩展
* generate 生成插件
* init 初始化
* bindEvent 绑定事件
*/
wqzGgl.prototype = {
generate: function(){
var $plugin = this;
$plugin.canvas = document.createElement("canvas");
$plugin.$elem.append($plugin.canvas);
if($plugin.canvas.getContext("2d")){
$plugin.ctx = $plugin.canvas.getContext("2d");
$plugin.init();
$plugin.bindEvent();
}else{
$plugin.canvas.remove();
console.error("当前浏览器不支持canvas！");
}
$plugin.$elem.children().show();
},
init: function(){
var $plugin = this;
$plugin.$elem.css({
"moz-user-select": "-moz-none",
"-moz-user-select": "none",
"-webkit-user-select": "none",
"-ms-user-select": "none",
"user-select": "none"
});
$plugin.canvas.width = $plugin.domWidth;
$plugin.canvas.height = $plugin.domHeight;
$plugin.canvas.style.position = "absolute";
$plugin.canvas.style.left = 0;
$plugin.canvas.style.top = 0;
$plugin.ctx.fillStyle = $plugin._options.coverBg;
$plugin.ctx.fillRect(0,0,$plugin.domWidth,$plugin.domHeight);
$plugin.ctx.globalCompositeOperation = "destination-out";
$plugin.ctx.lineWidth = $plugin.lineWidth;
},
bindEvent: function(){
var $plugin = this;
$plugin.$elem.on("mousedown",function(event){
$plugin.enableClear = true;
$plugin.startPoint.x = event.offsetX;
$plugin.startPoint.y = event.offsetY;
$plugin.ctx.beginPath();
$plugin.ctx.moveTo($plugin.startPoint.x,$plugin.startPoint.y);
});
$plugin.$elem.on("mousemove",function(event){
if($plugin.enableClear){
var x = event.offsetX;
var y = event.offsetY;
$plugin.ctx.lineTo(x,y);
$plugin.ctx.stroke();
$plugin.startPoint.x = x;
$plugin.startPoint.y = y;
}
});
$(document).on("mouseup",function(event){
$plugin.enableClear = false;
$plugin.ctx.closePath();
});
}
}
})(jQuery);
</script>
<script>
$(function(){
$("#container1").wqzGgl({});
$("#container2").wqzGgl({});
})
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » canvas实现刮刮乐插件