小编dph*_*ans的帖子

如何用canvas PaperJS画平行线?(画布/Javascript)

抱歉我的数学知识很差。

我怎样才能画出这样的平行线:

这是我当前的代码:

<canvas id='canvas' resize></canvas>
Run Code Online (Sandbox Code Playgroud)

我正在使用 PaperJS ( http://paperjs.org ):

<script type='text/javascript' src='http://paperjs.org/assets/js/paper.js'></script>
Run Code Online (Sandbox Code Playgroud)

这是我的脚本:

<script type='text/paperscript' canvas='canvas'>
    var path1    = new Path();
    var path2    = new Path();
    var path3    = new Path();
    var distance = 20;

    path1.strokeWidth = 2.0;
    path1.strokeColor = 'black';
    path2.strokeWidth = 2.0;
    path2.strokeColor = 'black';
    path2.dashArray   = [4, 4];
    path3.strokeWidth = 2.0;
    path3.strokeColor = 'black';

    function onMouseDown (event) {
       path2.add(event.point);
       path1.add(event.point - distance);
       path3.add(event.point + distance);
    };
</script>
Run Code Online (Sandbox Code Playgroud)

这是我的糟糕结果(我用红色圆圈四舍五入):

在此输入图像描述

javascript canvas paperjs

3
推荐指数
1
解决办法
2642
查看次数

标签 统计

canvas ×1

javascript ×1

paperjs ×1