Canvas 弹性画布（鼠标可拖拉）

Simple elastic drawer (linear easing) 用鼠标拖拉画布查看动效

h5, canvas

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4241
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//ELASTIC DRAWER SYSTEM (simple bezier curve with linear easing)

var debugDraw = false; //when set to true it draws the point used for calculation
var standardDraw = true; //whether the standard gfx are rendered

var dotRadius = 5; // radius to draw the physics masses

//usual init
var canvas = document.getElementById("canvas");
var graphics = canvas.getContext('2d');

//middle point coordinates (the point which controls the curve)
var pX = 0; //begins closed
var pY = 250; //half of the canvas

//helper function, converts degrees to radians
Math.radians = function(degrees) {
    return degrees * Math.PI / 180;
};

//coordinates where we start dragging the mouse
var mouseInitX = 0;
var mouseInitY = 0;

//coordinates where the mouse actually is
var mouseX = 0;
var mouseY = 0;

var targetX = 0; //drawer target X, I use this to thell the system where the drawer edge should move
var drawerX = 0;

var mouseForce = 0; //this should be 0, the force is calculated dynamically

mousePressed = false; //wheter the mouse is down or not

/*************************************
MOUSE EVENTS
**************************************/
canvas.onmousedown = function(e) {
    mousePressed = true;

//calculate the proper mouse x and y with the canvas offset
    var rect = canvas.getBoundingClientRect();

mouseInitX = e.x - rect.left;
    mouseInitY = e.y - rect.top;

mouseX = e.x - rect.left;
    mouseY = e.y - rect.top;

}
canvas.onmouseup = function(e) {
    mousePressed = false;
}

canvas.onmousemove = function(e) {
    if (!mousePressed) return;
    //calculate the proper mouse x and y with the canvas offset
    var rect = canvas.getBoundingClientRect();

mouseX = e.x - rect.left;
    mouseY = e.y - rect.top;

}

/*************************************
PROGRAM
**************************************/
function draw() {
    //we clear the canvas
    graphics.fillStyle = "black"
    graphics.fillRect(0, 0, canvas.height, canvas.width);

if (standardDraw) {
        graphics.fillStyle = "#aaa";
        graphics.beginPath();
        graphics.moveTo(0, 0);
        graphics.lineTo(drawerX, 0);
        //draw the curve
        graphics.bezierCurveTo(pX, pY, pX, pY, drawerX, 500);

graphics.lineTo(0, 500);
        graphics.fill();
    }

//draws the physycs elements:

if (debugDraw) {
        //dot
        graphics.fillStyle = "#FF0000";
        graphics.beginPath();
        graphics.arc(pX, pY, dotRadius, 0, Math.radians(360), false);
        graphics.fill()
            //lines
        graphics.beginPath();
        graphics.strokeStyle = "#FF0000";
        graphics.moveTo(drawerX, 0);
        graphics.lineTo(pX, pY);
        graphics.lineTo(drawerX, 500);
        graphics.stroke();

}

function update() {

//this block calculates the mouse force over the middle point, let's do it only when the mouse is pressed
    if (mousePressed) {

var angle = Math.atan2(pY - mouseY, pX - mouseX); //* THIS LINE GIVES YOU THE ANGLE BETWEEN TWO POINTS (mouse and the middle point)

//calculate the forces applied to the point
        var mouseForce = Math.sqrt(Math.pow(mouseInitX - mouseX, 2));

pX += -mouseForce / 20 * Math.cos(angle)
        pY += -mouseForce / 5 * Math.sin(angle);

//open drawer
        if (mouseForce > 250 && mouseX > mouseInitX) {
            targetX = 300;
            mousePressed = false;
        }
        //close drawer
        if (mouseForce > 150 && mouseX < mouseInitX) {
            targetX = 0;
            mousePressed = false;
        }

}

drawerX += (targetX - drawerX) / 5; //easing for the drawer position
    pX += (drawerX - pX) / 10; //easing for the X coord of the middle point
    pY += (250 - pY) / 10; //easing for the Y coord of the middle point

}

setInterval(draw, 1000 / 60);
setInterval(update, 1000 / 60);

编译

CSS

HTML

Simple elastic drawer (linear easing) 用鼠标拖拉画布查看动效

h5, canvas

编辑器支持Emmet

快捷键

Simple elastic drawer (linear easing) 用鼠标拖拉画布查看动效

h5, canvas

使用HTML5 Canvas绘制可拖拉球网结构

HTML5 Canvas可拖拉的果冻幽灵

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：