Canvas 三角形支架运动学

Inverse Kinematics Math ref: http://www.ryanjuckett.com/programming/analytic-two-bone-ik-in-2d/

canvas, 数学

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

! function() {

"use strict";

function Segment() {

this.x = 0;
        this.y = 0;
        this.len = 0;
        this.len2 = 0;

}

Segment.prototype = {

set length(len) {
            this.len = len;
            this.len2 = len * len;
        }

}

function line(x0, y0, x1, y1, color, width, d0, d1) {

ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.fillStyle = color;
        ctx.lineWidth = width;
        ctx.setLineDash([d0, d1]);
        ctx.moveTo(x0, y0);
        ctx.lineTo(x1, y1);
        ctx.stroke();
        ctx.moveTo(x0, y0);
        ctx.arc(x0, y0, width * 2, 0, 2 * Math.PI);
        ctx.moveTo(x1, y1);
        ctx.arc(x1, y1, width * 2, 0, 2 * Math.PI);
        ctx.fill();

}

function inverse_kinematic() {

var angle, theta1, theta2, targetSqrDist;

// target position
        var ix = pointer.x - origin.x;
        var iy = pointer.y - origin.y;

// target square distance
        targetSqrDist = ix * ix + iy * iy;

// first segment
        angle = Math.max(-1, Math.min(1, (targetSqrDist + segment1.len2 - segment2.len2) / (2 * segment1.len * Math.sqrt(targetSqrDist))));

theta1 = Math.atan2(iy, ix) - Math.acos(angle);

segment1.x = origin.x + segment1.len * Math.cos(theta1);
        segment1.y = origin.y + segment1.len * Math.sin(theta1);

// second segment
        angle = Math.max(-1, Math.min(1, (targetSqrDist - segment1.len2 - segment2.len2) / (2 * segment1.len * segment2.len)));

theta2 = Math.acos(angle);

segment2.x = segment1.x + segment2.len * Math.cos(theta2 + theta1);
        segment2.y = segment1.y + segment2.len * Math.sin(theta2 + theta1);

// draw
        line(origin.x, origin.y, segment1.x, segment1.y, "navy", 8, 1, 0);
        line(segment1.x, segment1.y, segment2.x, segment2.y, "gray", 8, 1, 0);
        line(origin.x, origin.y, pointer.x, pointer.y, "red", 4, 2, 2);

}

// main loop

function run() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

inverse_kinematic();

}

// init

var canvas = ge1doot.canvas("canvas");
    var ctx = canvas.ctx;
    var pointer = canvas.pointer;

if (!ctx.setLineDash) {
        ctx.setLineDash = function() {}
    }

var origin = {
        x: 0,
        y: 0
    }

var segment1 = new Segment();
    var segment2 = new Segment();

canvas.resize = function() {

origin.x = canvas.width / 2;
        origin.y = canvas.height / 2;
        var length = Math.min(canvas.width, canvas.height) / 3;
        segment1.length = length;
        segment2.length = length;
        pointer.x = origin.x;
        pointer.y = origin.y - length;

}

canvas.resize();
    run();

pointer.move = function() {

requestAnimationFrame(run);

}

}();

编译

CSS

HTML

Inverse Kinematics Math ref: http://www.ryanjuckett.com/programming/analytic-two-bone-ik-in-2d/

canvas, 数学

编辑器支持Emmet

快捷键

Inverse Kinematics Math ref: http://www.ryanjuckett.com/programming/analytic-two-bone-ik-in-2d/

canvas, 数学

Canvas 三角形切片效果动画

Canvas 三角蛇形发散动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：