Canvas_可涂抹画布
最近做一个项目，其中有个小功能就是刮刮乐！
利用到了HTML5画布 canvas
<html>
<head>
<title>Canvas_可涂抹画布</title>
<style>#canvas{background:url(http://g.hiphotos.baidu.com/image/pic/item/1f178a82b9014a9058672000aa773912b31bee36.jpg);height:300px;width:200px;}</style>
<script type="text/javascript">
/**事件绑定方法**/
function addEvent(object,eventType,fn){
if(object.attachEvent){
object.attachEvent('on'+eventType,fn); //ie绑定事件
}else if(object.addEventListener){
object.addEventListener(eventType,fn,false); //谷歌与火狐绑定事件
}
}
/**阻止默认事件**/
function preDef(e){
var e=e || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
addEvent(window,'load',function(){
/**阻止网页拖动**/
addEvent(document,"tounchmove",function(){
preDef(e);
});
/**canvas 画布**/
//var canvasElement=document.getElementById("canvas").getContext("2d");
function createCanvas(parent,width,height){
canvasElement=document.createElement("canvas");
canvasContext=canvasElement.getContext("2d");
canvasElement.width= width || 320;
canvasElement.height= height || 480;
canvasElement.id="canvasTag";
parent.appendChild(canvasElement);
}
var canvasParent=document.getElementById("canvas");
//alert(createCanvas(canvasParent,"500","500"));
function init(drawObj,width,height,fillColor){
/**实例化画布**/
createCanvas(drawObj,width,height);
/**绘制已填充矩形**/
var ctx=canvasContext;
ctx.fillStyle=fillColor;
ctx.fillRect(0,0,width,height);
ctx.fillCircle = function(x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};
//做效果测试只用了mousemove 大家可以做兼容移动设备 当然首先得做平台的navigator.userAgent 判断
addEvent(canvasElement,"mousemove",function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var radius = 20;
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);
});
}
init(canvas,"200","300","#ccc");
});
</script>
</head>
<body>
<div id="canvas"></div>
<body>
<head>
<title>Canvas_可涂抹画布</title>
<style>#canvas{background:url(http://g.hiphotos.baidu.com/image/pic/item/1f178a82b9014a9058672000aa773912b31bee36.jpg);height:300px;width:200px;}</style>
<script type="text/javascript">
/**事件绑定方法**/
function addEvent(object,eventType,fn){
if(object.attachEvent){
object.attachEvent('on'+eventType,fn); //ie绑定事件
}else if(object.addEventListener){
object.addEventListener(eventType,fn,false); //谷歌与火狐绑定事件
}
}
/**阻止默认事件**/
function preDef(e){
var e=e || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
addEvent(window,'load',function(){
/**阻止网页拖动**/
addEvent(document,"tounchmove",function(){
preDef(e);
});
/**canvas 画布**/
//var canvasElement=document.getElementById("canvas").getContext("2d");
function createCanvas(parent,width,height){
canvasElement=document.createElement("canvas");
canvasContext=canvasElement.getContext("2d");
canvasElement.width= width || 320;
canvasElement.height= height || 480;
canvasElement.id="canvasTag";
parent.appendChild(canvasElement);
}
var canvasParent=document.getElementById("canvas");
//alert(createCanvas(canvasParent,"500","500"));
function init(drawObj,width,height,fillColor){
/**实例化画布**/
createCanvas(drawObj,width,height);
/**绘制已填充矩形**/
var ctx=canvasContext;
ctx.fillStyle=fillColor;
ctx.fillRect(0,0,width,height);
ctx.fillCircle = function(x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};
//做效果测试只用了mousemove 大家可以做兼容移动设备 当然首先得做平台的navigator.userAgent 判断
addEvent(canvasElement,"mousemove",function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var radius = 20;
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);
});
}
init(canvas,"200","300","#ccc");
});
</script>
</head>
<body>
<div id="canvas"></div>
<body>
</html>
