canvas画图小例子2

最新推荐文章于 2023-03-19 15:46:29 发布

幻想的小飞

最新推荐文章于 2023-03-19 15:46:29 发布

阅读量125

点赞数

分类专栏： js

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE>
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/jqplot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript">
    var list=[];
    var currentC;
    var _e={};
    var cricle = function(x,y,r){
        this.x=x;
        this.y=y;
        this.r=r;
        this.isCurrent=false;
        this.drawC=function(ctx,x,y){
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(this.x,this.y-this.r);
            ctx.arc(this.x,this.y,this.r,2*Math.PI,0,true);
            if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {
 
                     
                    ctx.fillStyle = '#ff0000';
                    currentC=this;
                    this.isCurrent=true;
 
            }else{
                ctx.fillStyle = '#999999';
            }
            ctx.fill();
        }
     
    }
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            for(var i=0;i<10;i++){
                var c=new cricle(20*i,20*i,5*i);
                c.drawC(ctx);
                list.push(c);
            }
        }
    }
     
    function reDraw(e){
        e=e||event;
        var canvas = document.getElementById('tutorial');
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;
 
        canvas.width = canvas.width;
        if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            for(var i=0;i<list.length;i++){
                var c=list[i];
                c.drawC(ctx,x,y);
 
                 
            }
        }
     
    }
     
    function show(e){
        e=e||event;
        var canvas = document.getElementById('tutorial');
        var ctx = canvas.getContext('2d');
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;
 
        if(currentC){
            currentC.x=parseInt(x+(x-currentC.x)/5);
            currentC.y=parseInt(y+(y-currentC.y)/5);
        }
        _e=e;
 
 
    }
 
    window.function(){
         
        var canvas = document.getElementById('tutorial');
        draw();
         
        canvas.onmousedown=function(e){
            console.log("aaa")
            e=e||event;
            var x = e.clientX - canvas.offsetLeft;
            var y = e.clientY - canvas.offsetTop;
            if(currentC)
                currentC.isCurrent=false;
            currentC=null;
            reDraw(e);
            _e=e;
            var showTimer=setInterval(function(e){
                reDraw(e);
            },10,_e);
            canvas.onmousemove=show;
 
            document.onmouseup=function(){
                if(currentC)
                    currentC.isCurrent=false;
                currentC=null;
                canvas.onmousemove=null;
                clearInterval(showTimer);
            }
 
        }
    }
</script>
<style type="text/css">
  canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee;">
    <canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
</body>
</html>

幻想的小飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画图小例子2

&lt;!DOCTYPE&gt;&lt;html&gt; &lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;!--[if lt IE 9]&gt;&lt;script language="javascript" type
复制链接

扫一扫

专栏目录