HTML5之canvas5

来源：互联网发布：2k18艾佛森捏脸数据编辑：程序博客网时间：2024/06/05 08:56

<style>

body{ background:black;}

#c1{ background:white;}

</style>

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>

</body>

后画的会盖在前面画的上面

源：红色的目标：黑色的

Destination-over

Source-atop

<style>

body{ background:black;}

#c1{ background:white;}

</style>

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>

</body>

Xor:

<style>

body{ background:black;}

#c1{ background:white;}

#img1{ background:white;}

</style>

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>

</body>

针对一个图形：

只有点到黑色圆圈范围内才会执行

<style>

body{ background:black;}

#c1{ background:white;}

#img1{ background:white;}

</style>

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.onmousedown= 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>

</body>

对于多个图片，只针对最后一次画图片

<style>

body{ background:black;}

#c1{ background:white;}

#img1{ background:white;}

</style>

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.onmousedown= 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>

</body>

问题解决：绘制图形的操作封装成对象，每创建出来一个对象，都是独立的部分，再添加一个方法，在操作方式时，重新再绘制一次，再判断鼠标的点是否在范围内

<style>

body{ background:black;}

#c1{ background:white;}

#img1{ background:white;}

</style>

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.onmousedown= 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>

</body>

点击需要重绘

<style>

body{ background:black;}

#c1{ background:white;}

</style>

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>

</body>

拖拽

<style>

body{ background:black;}

#c1{ background:white;}

</style>

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>

</body>

点击变色：通过ID获取需变色的物体

<style>

body{ background:black;}

#c1{ background:white;}

</style>

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.onclick= function(){

jc('#c1').color('#ffff00');

};

</script>

运动

<style>

body{ background:black;}

#c1{ background:white;}

</style>

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.onclick= function(){

jc('#c1').color('#ffff00').animate({x:200,y:200,radius:5},2000);

};

</script>

0 0