相关疑难解决方法(0)

我想沿特定路径做一个对象的动画

我必须在路径上移动小矩形.在画布内单击后,矩形会移动.

我无法为它设置动画,因为对象只是跳到所需的点.

请在小提琴上找到代码.

HTML

<canvas id="myCanvas" width=578 height=200></canvas>

Run Code Online (Sandbox Code Playgroud)

CSS

#myCanvas {
    width:578px;
    height:200px;
    border:2px thin;
}

Run Code Online (Sandbox Code Playgroud)

JavaScript的

var myRectangle = {
    x: 100,
    y: 20,
    width: 25,
    height: 10,
    borderWidth: 1
};

$(document).ready(function () {
    $('#myCanvas').css("border", "2px solid black");
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var cntxt = canvas.getContext('2d');
    drawPath(context);
    drawRect(myRectangle, cntxt);

    $('#myCanvas').click(function () {
        function animate(myRectangle, canvas, cntxt, startTime) {
            var time = (new Date()).getTime() - startTime;
            var linearSpeed = 10;
            var newX = Math.round(Math.sqrt((100 …

Run Code Online (Sandbox Code Playgroud)

javascript jquery canvas html5-canvas

Cha*_*dni

2016 06-24

23
推荐指数

2
解决办法

3万
查看次数

将贝塞尔曲线分成两半相等

我有2点之间的bezier曲线.我想将所有曲线切成两个相等的一半.我的一个想法是,如果我可以控制't'值我将通过t = [0,0.5]和t = [0.5,1]绘制2条曲线,但我不知道如何.以下是我的代码.我不介意任何其他想法或建议

<!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=utf-8" />
    <title>D3 test</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <script>
    var Over = function(){
        d3.select(this)
        .style("stroke-opacity", 0.25);
    }
    var Out = function(){
        d3.select(this)
        .transition().duration(200)
        .style("stroke-opacity", 0);
    }

    function curve(n,x1,y1,x2,y2){

        var xr = (x1+x2)/2,
            yr = (y1+y2)/2,
            euDist = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)),
            x3 = -y1+xr+yr, x4 = -y2+xr+yr,
            y3 =  x1+yr-xr, y4 =  x2+yr-xr,
            ctrl , curveDescription;

        svg.append('path')
            .attr("stroke", 'blue')
            .attr('fill','none')
            .style("stroke-opacity",0.25)
            .attr('d', 'M'+x3+','+y3+'L'+x4+','+y4)
            .attr('stroke-width',strokeWidth);

        for(var j=0;j<=n;j++){ …

Run Code Online (Sandbox Code Playgroud)

javascript svg bezier linear-algebra

use*_*030

2013 09-09

6
推荐指数

3
解决办法

4153
查看次数

Paper.js从一条路径绘制多条平行路径

我试图基于一组坐标绘制多个并行路径,如下例所示:

我根据一组段创建了我的路径,然后我克隆了五次,并以这种方式翻译:

var myPath;
var lineData = []; // Long array of segments
myPath.segments = lineData;

for (var i = 1; i < 5; i++) {
    var clone = myPath.clone();
    clone.translate(new paper.Point(0, i*5));
}

Run Code Online (Sandbox Code Playgroud)

这是我得到的结果: