Question

使用HTML5画布时，如何保存javascript变量/数组的特定路径，然后再操作它？以下是我到目前为止所做的事情：

                    ctx.beginPath();
                        ctx.moveTo(lastX,lastY);
                        ctx.lineTo(x,y);
                        ctx.lineWidth = s*2;
                        ctx.stroke();
                    ctx.closePath();

现在，我需要的是能够有时将此路径存储在数组中。然后，我需要能够返回并稍后更改数组中所有路径的颜色。（显然，我不知道该怎么做。）

Answer 1

您可以序列化将路径绘制到javascript对象中所需的所有数据

使用javascript对象的好处是，如果需要将路径移动到其他位置（例如返回服务器），则可以进一步将对象序列化为JSON。

var path1={
    lineWidth:1, 
    stroke:"blue", 
    points:[{x:10,y:10},{x:100,y:50},{x:30,y:200}]
};

然后您可以使用该对象绘制/重绘该路径

    function draw(path){

        // beginPath
        ctx.beginPath();

        // move to the beginning point of this path
        ctx.moveTo(path.points[0].x,path.points[0].y);

        // draw lines to each point on the path
        for(pt=1;pt<path.points.length;pt++){
            var point=path.points[pt];
            ctx.lineTo(point.x,point.y);
        }

        // set the path styles (color & linewidth)
        ctx.strokeStyle=path.stroke;
        ctx.lineWidth=path.lineWidth;

        // stroke this path
        ctx.stroke();
    }

要更改路径的颜色，只需更改对象的笔触属性并再次调用draw（）：

    paths[0].stroke="orange";
    paths[1].stroke="green";
    draw();

这是代码和小提琴：http://jsfiddle.net/m1erickson/McZrH/

<!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(){

    // get references to canvas and context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // serialize paths to a javascript objects
    var path1={lineWidth:1, stroke:"blue", points:[]};
    var path2={lineWidth:4, stroke:"red", points:[]};

    // save the paths to an array
    var paths=[];
    paths.push(path1);
    paths.push(path2);


    // build test path1
    newPoint(25,25,path1);
    newPoint(100,50,path1);
    newPoint(50,75,path1);
    newPoint(25,25,path1);

    // build test path2
    newPoint(200,100,path2);
    newPoint(250,100,path2);
    newPoint(250,200,path2);
    newPoint(200,200,path2);
    newPoint(200,100,path2);

    // draw the paths defined in the paths array
    draw();

    // add a new point to a path
    function newPoint(x,y,path){
        path.points.push({x:x,y:y});
    }


    function draw(){

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

        for(p=0;p<paths.length;p++){

            // get a path definition
            var path=paths[p];

            // beginPath
            ctx.beginPath();

            // move to the beginning point of this path
            ctx.moveTo(path.points[0].x,path.points[0].y);

            // draw lines to each point on the path
            for(pt=1;pt<path.points.length;pt++){
                var point=path.points[pt];
                ctx.lineTo(point.x,point.y);
            }

            // set the path styles (color & linewidth)
            ctx.strokeStyle=path.stroke;
            ctx.lineWidth=path.lineWidth;

            // stroke this path
            ctx.stroke();

        }

    }

    // test
    // change the stroke color on each path
    $("#recolor").click(function(){
        paths[0].stroke="orange";
        paths[1].stroke="green";
        draw();
    });

}); // end $(function(){});
</script>

</head>

<body>
    <button id="recolor">Recolor</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

现在可以使用新的path2D对象。

新的Path2D API（可从Firefox 31+获得）允许您存储路径，这简化了画布绘制代码并使其运行更快。构造函数提供了三种创建Path2D对象的方法：

new Path2D();     // empty path object
new Path2D(path); // copy from another path
new Path2D(d);    // path from from SVG path data

第三个版本，它采用SVG路径数据构建，特别方便。您现在可以重新使用SVG路径直接在画布上绘制相同的形状：

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

信息来自Mozilla official site。

Answer 3

在画布中，您无法更改画布视图而不清除它并重新绘制它;因此，您需要创建一个绘制画布的函数。在数组存储你的行Positions，在函数循环期间通过数组并添加这些。显然你可以随时重绘画布;通常你会设置一个事件监听器或计时事件

Answer 4

简短的回答：你做不到。它位于Canvas2D API的下一个草案中（参见http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#path-objects），但尚不支持。

更长的答案：你不能，但是你可以编写一个表示路径的对象，并给它一个draw(canvas)函数，以便它将自己绘制到具有所选颜色和填充属性的画布上。例如：

var Path = function() {
  this.instructions = [];
}
Path.prototype = {
  instructions: [],
  moveTo: function(x,y) {
    instructions.push({
      type: "moveTo",
      arguments: [x,y]
    });
  }
  ...
  draw: function(canvas) {
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    this.instructions.forEach(function(i) {
      ctx[i.type].apply(i.arguments);
    });
    ctx.closePath();
  } 
}

Answer 5

这可能会有所帮助：

http://www.rgraph.net/blog/2015/september/svg-style-paths-for-canvas-with-the-rgraph-path-function.html

这是一个允许您使用字符串的函数，该字符串由字母和数字组成，然后由此函数和执行的操作进行解释。所以现在你的路径可以是一个字符串 - 就像SVG路径一样 - 它们更容易传递和/或存储在数据库中。

因此绘制矩形的路径可能如下所示：

b r 5 5 100 100 f红色

这意味着：

b: beginPath()
r: rect()
f: fill()

HTML5 Canvas：操纵个别路径

5 个答案: