个人中心
gpt4 book ai didi

javascript - 在 Canvas 中沿着弯曲路径绘制形状

转载 作者：行者123 更新时间：2023-11-28 19:55:52 24 4
gpt4 key购买 nike

我一直在谷歌搜索，但找不到答案(我认为我问了错误的问题)，但我想知道是否可以沿着路径绘制一组对象。

例如，是否可以使用quadraticCurveTo()绘制一条路径，然后沿着该曲线绘制一组圆？

提前致谢。

最佳答案

这个方程将为您提供沿二次曲线间隔的点。

在曲线开始处 T==0.00

在曲线末端T==1.00

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}

因此，您可以沿着二次曲线绘制圆，如下所示:http://jsfiddle.net/m1erickson/j79sK/

enter image description here

此代码示例使用 html canvas 而不是 KineticJS 库，但您可以轻松地在此示例执行 context.arc 的位置“新建”一个 Kinetic.Circle >

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var startPoint={x:50,y:150};
    var controlPoint={x:125,y:20};
    var endPoint={x:200,y:150};

    ctx.beginPath();
    ctx.moveTo(startPoint.x,startPoint.y);
    ctx.quadraticCurveTo(controlPoint.x,controlPoint.y,endPoint.x,endPoint.y);
    ctx.stroke();

    for(var t=0;t<101;t+=5){
        var point=getQuadraticBezierXYatT(startPoint,controlPoint,endPoint,t/100);
        ctx.beginPath();
        ctx.arc(point.x,point.y,3,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=randomColor();
        ctx.fill();
    }

    function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
        var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
        var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
        return( {x:x,y:y} );
    }

    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
    }

}); // end $(function(){});
</script>
</head>
<body>
    <button id="test">Test</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

关于javascript - 在 Canvas 中沿着弯曲路径绘制形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22578254/

24 4 0
文章推荐： javascript - 无法正确访问json
文章推荐： ios - UISegmentedControl setFrame 不工作
文章推荐： python - 通过一些检查获取一组数字之间的原始输入
文章推荐： ios - 从字符串创建 Twitter 句柄数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com