zoukankan html css js c++ java

h5-9 canvas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = 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>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = 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>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
#img1{ background:white;}
</style>
<script>
window.onload = function(){
    var oImg = document.getElementById('img1');
    var oC = document.getElementById('c1');
    var oGC = 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>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
#img1{ background:white;}
</style>
<script>
window.onload = function(){
    var oImg = document.getElementById('img1');
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    oGC.beginPath();
    oGC.arc(100,100,50,0,360*Math.PI/180,false);
    oGC.closePath();
    oGC.fill();
    
    oC.onmousedown = function(ev){
        var ev = ev || window.event;
        var x = ev.clientX - oC.offsetLeft;
        var y = 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>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
#img1{ background:white;}
</style>
<script>
window.onload = function(){
    var oImg = document.getElementById('img1');
    var oC = document.getElementById('c1');
    var oGC = 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){
        var ev = ev || window.event;
        var x = ev.clientX - oC.offsetLeft;
        var y = ev.clientY - oC.offsetTop;
        
        if( oGC.isPointInPath(x,y) ){//isPointInPath只作用于最后画出来的oGC
            alert(123);
        }
    };
    
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
<img id="img1" src="" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
#img1{ background:white;}
</style>
<script>
window.onload = function(){
    var oImg = document.getElementById('img1');
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    var c1 = new Shape(100,100,50);
    var c2 = new Shape(200,200,50);
    
    oC.onmousedown = function(ev){
        var ev = ev || window.event;
        var point = {
            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);
    };
    
    function Shape(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>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>   //画布的js
<script>
window.onload = function(){
    
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    jc.start('c1',true);  //开始，第二个参数：代表重绘的意思，只有重绘了才有点击事件。
    
    //jc.rect(100,100,50,50,'#ff0000',1);//画矩形
    jc.circle(100,100,50,'#ff0000',1).click(function(){//画园，1表示填充，0表示不填充。
        alert(123);
    });
    
    jc.start('c1');//闭合

};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>
<script>
window.onload = function(){
    
    var oC = document.getElementById('c1');
    var oGC = 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>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>
<script>
window.onload = function(){
    var oInput = document.getElementById('input1');
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    jc.start('c1',true);  //第二个参数：代表重绘的意思
    
    //jc.rect(100,100,50,50,'#ff0000',1);
    jc.circle(100,100,50,'#ff0000',1).id('c11');//给js加id为c11
    
    jc.start('c1');//关闭，相当于close.
    
    oInput.onclick = function(){
        
        jc('#c11').color('#ffff00');//通过#c11确定上面的js
        
    };

};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
<input type="button" value="点击" id="input1" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>
<script>
window.onload = function(){
    var oInput = document.getElementById('input1');
    var oC = document.getElementById('c1');
    var oGC = 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);//{x:200,y:200,radius:5}是一个json,radius表示半径变成5，
        
    };

};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
<input type="button" value="点击" id="input1" />
</body>
</html>

查看全文

相关阅读:
【bzoj2079】[Poi2010]Guilds 构造结论题
 【bzoj1899】[Zjoi2004]Lunch 午餐 dp
【bzoj1345】[Baltic2007]序列问题Sequence 单调栈
 【bzoj1047】[HAOI2007]理想的正方形二维RMQ
【bzoj1044】[HAOI2008]木棍分割二分+dp
【bzoj5037】[Jsoi2014]电信网络最大权闭合图
 【bzoj5018】[Snoi2017]英雄联盟背包dp
【bzoj5020】[THUWC 2017]在美妙的数学王国中畅游泰勒展开+LCT
【bzoj2213】[Poi2011]Difference dp
【bzoj2161】布娃娃权值线段树

原文地址：https://www.cnblogs.com/yaowen/p/5358949.html