Js_面向对象_canvas_03

来源：互联网发布：怎么做数据分析编辑：程序博客网时间：2024/05/21 07:13

基于canvas实现物理运动效果与动画效果
1.hover效果

<style type="text/css">    html,body{        margin: 0;        padding: 0;    }    #myCanvas{        border: 1px solid black;    }</style></head><body><canvas id="myCanvas" width="800" height="600"></canvas><script type="text/javascript">    var oCanvas = document.getElementById("myCanvas");    var ctx = oCanvas.getContext("2d");    //绘制矩形    function drawRect(obj){        ctx.beginPath();        ctx.fillStyle = obj.fillstyle;        ctx.rect(obj.x, obj.y, obj.w, obj.h);        ctx.fill();    }    //矩形的构造函数    function Rect(x, y, w, h, fillstyle){        this.x = x;        this.y = y;        this.w = w;        this.h = h;        this.fillstyle = fillstyle;        drawRect(this);    }    var rt1 = new Rect(100, 100, 100, 100, "blue");    oCanvas.onmousemove = function(e){        var e = e || window.event;        //清除        ctx.clearRect(0, 0, oCanvas.width, oCanvas.height);        var mx = e.clientX;        var my = e.clientY;        //判断鼠标位置是否在矩形内        //if(rt1.x <= mx && (rt1.x + rt1.w) >= mx && rt1.y <= my && (rt1.y + rt1.h) >= my){        //  rt1.fillstyle = "red";        //} else {        //  rt1.fillstyle = "blue";        //}        //判定指定位置是否在当前绘图路径内部        if(ctx.isPointInPath(mx, my)){            rt1.fillstyle = "red";        } else {            rt1.fillstyle = "blue";        }        drawRect(rt1);    }</script>

2.多物体效果

<style type="text/css">html,    body {        margin: 0;        padding: 0;    }    #myCanvas {        border: 1px solid black;    }</style></head><body><canvas id="myCanvas" width="800" height="800"></canvas><script type="text/javascript">    var oCanvas = document.getElementById("myCanvas");    var ctx = oCanvas.getContext("2d");    //绘制矩形    function drawRect(obj) {        ctx.beginPath();        ctx.fillStyle = obj.fillstyle;        ctx.rect(obj.x, obj.y, obj.w, obj.h);        //ctx.fill();    }    //矩形的构造函数    function Rect(x, y, w, h, fillstyle) {        this.x = x;        this.y = y;        this.w = w;        this.h = h;        this.fillstyle = fillstyle;        drawRect(this);    }    var str = [];    var num = 10;    for(var i = 0; i < num; i++) {        str[i] = new Rect(50 * i, 50 * i, 50, 50, "blue");        ctx.fill();    }    oCanvas.onmousemove = function(e) {        for(var i = 0; i < num; i++) {            var e = e || window.event;            var mx = e.clientX;            var my = e.clientY;            drawRect(str[i]);            //判定指定位置是否在当前绘图路径内部            if(ctx.isPointInPath(mx, my)) {                str[i].fillstyle = "red";            } else {                str[i].fillstyle = "blue";            }            ctx.fill();        }    }</script></body>

3.拖拽_1

<style type="text/css">    html,    body {        margin: 0;        padding: 0;    }</style></head><body><canvas id="myCanvas" width="800" height="800" style="border: 1px solid black;"></canvas><script type="text/javascript">    var oCanvas = document.getElementById("myCanvas");    var ctx = oCanvas.getContext("2d");    //绘制矩形    function drawRect(obj) {        ctx.beginPath();        ctx.fillStyle = obj.fillstyle;        ctx.rect(obj.x, obj.y, obj.w, obj.h);        ctx.fill();    }    //矩形的构造函数    function Rect(x, y, w, h, fillstyle) {        this.x = x;        this.y = y;        this.w = w;        this.h = h;        this.fillstyle = fillstyle;        drawRect(this);    }    var str = [];    var num = 10;    for(var i = 0; i < num; i++) {        str[i] = new Rect(50 * i, 50 * i, 50, 50, "blue");    }    oCanvas.onmousedown = function(e){        var e = e || window.event;        //声明一个空对象（储存哪一个要移动）        var moveObj = null;        //移动对象的位置        var mox = 0;        var moy = 0;        //获取鼠标初始的位置        var mx = e.clientX;        var my = e.clientY;        for(var i = 0; i < str.length; i++){            if(mx >= str[i].x && mx <= str[i].x + str[i].w && my >= str[i].y && my <= str[i].y + str[i].h){                moveObj = str[i];                //获取移动对象的初始位置                mox = str[i].x;                moy = str[i].y;            }        }        //判断是否存在移动对象        if(moveObj){            oCanvas.onmousemove = function(e){                //清空画布                ctx.clearRect(0, 0, oCanvas.width, oCanvas.height);                var e = e || window.event;                //获取当前鼠标的位置                var mx2 = e.clientX;                var my2 = e.clientY;                //更新移动搞对象的位置                moveObj.x = mox + (mx2 - mx);                moveObj.y = moy + (my2 - my);                for(var i = 0; i < str.length; i++){                    drawRect(str[i]);                }            }            oCanvas.onmouseup = function(){                oCanvas.onmousemove = null;            }        }    }</script></body>

3_拖拽_02 正方形碰撞检测

var last = str[str.length - 1];for(var i = 0; i < str.length - 1; i++) {    //碰撞检测    if(last.x + last.w >= str[i].x //左    &&    last.y + last.h >= str[i].y //上    &&    str[i].x + str[i].w >= last.x //右    &&    str[i].y + str[i].h >= last.y //下    ){        str[i].fillstyle = "red";    }else{        str[i].fillstyle = "blue";    }}

3_拖拽_03 圆形碰撞检测

var last = str[str.length - 1];for(var i = 0; i < str.length - 1; i++) {//碰撞检测if(Math.pow(last.x - str[i].x, 2) + Math.pow(last.y - str[i].y, 2) < Math.pow(str[i].r + last.r, 2)){    str[i].fillstyle = "red";}else{    str[i].fillstyle = "blue";}}

0 0