<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
oGC.fillRect(0,0,100,100);
oGC.fillStyle= 'red';
oGC.globalAlpha = 0.5;
oGC.fillRect(50,50,100,100);
};
</script>
</head>
<body>
<canvas id="c1"width="400" height="400"></canvas>
</body>
后画的会盖在前面画的上面
源:红色的 目标:黑色的
Destination-over
Source-atop
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
oGC.fillRect(0,0,100,100);
oGC.fillStyle= 'red';
oGC.globalCompositeOperation= 'xor';
oGC.fillRect(50,50,100,100);
};
</script>
</head>
<body>
<canvas id="c1"width="400" height="400"></canvas>
</body>
Xor:
<style>
body{ background:black;}
#c1{ background:white;}
#img1{ background:white;}
</style>
<script>
window.onload = function(){
varoImg = document.getElementById('img1');
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
oGC.fillRect(0,0,100,100);
oGC.fillStyle= 'red';
oGC.globalCompositeOperation= 'xor';
oGC.fillRect(50,50,100,100);
//alert(oC.toDataURL() );
oImg.src= oC.toDataURL();
};
</script>
</head>
<body>
<canvas id="c1"width="400" height="400"></canvas>
<img id="img1"src="" />
</body>
针对一个图形:
只有点到黑色圆圈范围内才会执行
<style>
body{ background:black;}
#c1{ background:white;}
#img1{ background:white;}
</style>
<script>
window.onload = function(){
varoImg = document.getElementById('img1');
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
oGC.beginPath();
oGC.arc(100,100,50,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oC.οnmοusedοwn= function(ev){
varev = ev || window.event;
varx = ev.clientX - oC.offsetLeft;
vary = ev.clientY - oC.offsetTop;
if(oGC.isPointInPath(x,y) ){
alert(123);
}
};
};
</script>
</head>
<body>
<canvas id="c1"width="400" height="400"></canvas>
<img id="img1"src="" />
</body>
对于多个图片,只针对最后一次画图片
<style>
body{ background:black;}
#c1{ background:white;}
#img1{ background:white;}
</style>
<script>
window.onload = function(){
varoImg = document.getElementById('img1');
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
oGC.beginPath();
oGC.arc(100,100,50,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.beginPath();
oGC.arc(200,200,50,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oC.οnmοusedοwn= function(ev){
varev = ev || window.event;
varx = ev.clientX - oC.offsetLeft;
vary = ev.clientY - oC.offsetTop;
if(oGC.isPointInPath(x,y) ){
alert(123);
}
};
};
</script>
</head>
<body>
<canvas id="c1"width="400" height="400"></canvas>
<img id="img1"src="" />
</body>
问题解决:绘制图形的操作封装成对象,每创建出来一个对象,都是独立的部分,再添加一个方法,在操作方式时,重新再绘制一次,再判断鼠标的点是否在范围内
<style>
body{ background:black;}
#c1{ background:white;}
#img1{ background:white;}
</style>
<script>
window.onload = function(){
varoImg = document.getElementById('img1');
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
varc1 = new Shape(100,100,50);
varc2 = new Shape(200,200,50);
oC.οnmοusedοwn= function(ev){
varev = ev || window.event;
varpoint = {
x: ev.clientX - oC.offsetLeft,
y: ev.clientY - oC.offsetTop
};
c1.reDraw(point);
c2.reDraw(point);
};
c1.click= function(){
alert(123);
};
c2.click= function(){
alert(456);
};
functionShape(x,y,r){
this.x= x;
this.y= y;
this.r= r;
oGC.beginPath();
oGC.arc(this.x,this.y,this.r,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
}
Shape.prototype.reDraw= function(point){
oGC.beginPath();
oGC.arc(this.x,this.y,this.r,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
if(oGC.isPointInPath(point.x,point.y) ){
this.click();
}
};
};
</script>
</head>
<body>
<canvas id="c1"width="400" height="400"></canvas>
<img id="img1"src="" />
</body>
点击需要重绘
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script type="text/javascript"src="jCanvaScript.1.5.18.min.js"></script>
<script>
window.onload = function(){
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
jc.start('c1',true); //第二个参数:代表重绘的意思
//jc.rect(100,100,50,50,'#ff0000',1);
jc.circle(100,100,50,'#ff0000',1).click(function(){
alert(123);
});
jc.start('c1');
};
</script>
</head>
<body>
<canvas id="c1"width="400" height="400"></canvas>
</body>
拖拽
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script type="text/javascript"src="jCanvaScript.1.5.18.min.js"></script>
<script>
window.onload = function(){
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
jc.start('c1',true); //第二个参数:代表重绘的意思
//jc.rect(100,100,50,50,'#ff0000',1);
jc.circle(100,100,50,'#ff0000',1).draggable();
jc.start('c1');
};
</script>
</head>
<body>
<canvas id="c1"width="400" height="400"></canvas>
</body>
点击变色:通过ID获取需变色的物体
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script type="text/javascript"src="jCanvaScript.1.5.18.min.js"></script>
<script>
window.onload = function(){
varoInput = document.getElementById('input1');
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
jc.start('c1',true); //第二个参数:代表重绘的意思
//jc.rect(100,100,50,50,'#ff0000',1);
jc.circle(100,100,50,'#ff0000',1).id('c1');
jc.start('c1');
oInput.οnclick= function(){
jc('#c1').color('#ffff00');
};
};
</script>
运动
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script type="text/javascript"src="jCanvaScript.1.5.18.min.js"></script>
<script>
window.onload = function(){
varoInput = document.getElementById('input1');
varoC = document.getElementById('c1');
varoGC = oC.getContext('2d');
jc.start('c1',true); //第二个参数:代表重绘的意思
//jc.rect(100,100,50,50,'#ff0000',1);
jc.circle(100,100,50,'#ff0000',1).id('c1');
jc.start('c1');
oInput.οnclick= function(){
jc('#c1').color('#ffff00').animate({x:200,y:200,radius:5},2000);
};
};
</script>