zoukankan html css js c++ java

canvas高级篇（转载）移动元素

本文转载在http://bbs.blueidea.com/thread-2979405-1-1.html

哈哈哈，好骚气！终于解决了我的需求。可以移动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=gb2312" />
    <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.onload=function(){

            var canvas = document.getElementById('tutorial');
            draw();

            canvas.onmousedown=function(e){
                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;">
<div style="background:#0f0;100px;height:100px;position:absolute;left:100px;top:100px;z-index:1;" onclick="alert(1);"></div>
<canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>

</body>
<script>

</script>
</html>

查看全文

相关阅读:
Mondriaan's Dream POJ
H
Superdoku Kattis
Corn Fields POJ
旅行的意义 Gym
G
J
Welcome Party ZOJ
redis入门到精通系列（三）：key的通用操作和redis内部db的通用操作
 redis入门到精通系列（二）：redis操作的两个实践案例

原文地址：https://www.cnblogs.com/zeussbook/p/10283134.html