HTML画布艺术，从草图生成坐标数据

时间：2014-01-10 16:55:22

标签： javascript canvas html5-canvas

我使用HTML5画布绘制心形：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="1366" height="600"></canvas>
    <script>
     var heart = [
        [707,359],[707,359],[707,359],[707,359],[708,358],[711,354],[713,352],[714,348],[716,345],[720,335],
        [721,334],[722,333],[724,332],[725,330],[727,327],[731,322],[734,320],[737,318],[740,314],[743,312],
        [745,311],[749,309],[753,308],[757,306],[761,303],[764,302],[767,302],[771,301],[774,301],[778,301],
        [783,301],[786,301],[790,300],[796,300],[801,300],[805,300],[809,300],[811,300],[815,302],[817,303],
        [820,305],[822,306],[824,307],[827,309],[830,311],[834,313],[836,314],[838,316],[841,318],[844,321],
        [845,324],[847,326],[849,328],[852,332],[853,334],[855,336],[857,337],[858,339],[860,341],[862,345],
        [863,349],[863,352],[864,356],[864,359],[865,362],[866,364],[868,368],[869,372],[870,377],[871,381],
        [872,384],[872,388],[872,392],[872,395],[872,399],[872,401],[872,405],[872,409],[871,412],[870,417],
        [869,419],[869,422],[867,427],[866,429],[865,434],[863,438],[862,442],[861,443],[860,445],[857,448],
        [854,451],[852,454],[849,456],[846,459],[843,460],[836,466],[835,466],[833,467],[821,475],[820,477],
        [819,478],[817,481],[815,483],[811,486],[808,487],[803,491],[802,491],[800,492],[795,493],[791,497],
        [789,498],[786,498],[780,502],[772,507],[770,510],[767,511],[762,516],[758,520],[756,524],[753,527],
        [750,529],[746,532],[741,534],[736,537],[732,538],[731,539],[735,537],[735,537],[735,537],[730,543],
        [729,546],[727,551],[726,553],[723,555],[721,558],[715,568],[714,570],[714,572],[713,575],[708,585],
        [708,586],[707,586],[704,583],[704,359],[704,359],[700,356],[698,352],[697,350],[696,345],[694,343],
        [693,340],[690,335],[688,335],[687,334],[683,332],[681,329],[677,326],[675,323],[672,319],[669,314],
        [668,312],[663,310],[660,310],[656,310],[653,309],[647,309],[644,308],[642,308],[637,307],[632,303],
        [628,301],[624,297],[621,297],[619,297],[616,297],[616,298],[616,299],[614,300],[620,302],[620,302],
        [620,302],[618,302],[612,302],[605,302],[598,302],[596,303],[594,305],[592,307],[590,309],[586,310],
        [583,313],[582,315],[579,319],[576,320],[573,323],[571,325],[569,327],[563,329],[560,333],[558,336],
        [557,338],[556,341],[555,343],[551,346],[549,349],[549,354],[549,357],[547,361],[546,367],[543,372],
        [542,375],[541,380],[540,381],[540,382],[540,382],[540,382],[540,382],[540,384],[540,386],[540,389],
        [539,391],[539,394],[539,398],[539,404],[539,408],[539,412],[539,416],[540,423],[542,428],[544,433],
        [549,436],[552,439],[555,442],[557,445],[560,448],[562,452],[564,459],[565,461],[560,449],[560,449],
        [561,450],[571,458],[580,466],[584,469],[587,473],[589,476],[591,477],[575,466],[575,466],[575,466],
        [576,466],[582,471],[587,475],[590,477],[594,481],[598,484],[601,489],[604,491],[607,495],[611,496],
        [617,498],[622,500],[626,501],[629,504],[633,508],[636,510],[642,515],[650,522],[651,525],[655,528],
        [657,529],[660,530],[663,530],[667,533],[671,534],[676,536],[679,537],[681,539],[683,540],[676,536],
        [676,536],[676,536],[679,539],[684,546],[687,548],[689,551],[692,554],[696,558],[698,563],[701,567],
        [702,571],[704,574],[705,577],[706,579],[707,580],[708,582],[709,586]
    ];
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(707, 359);
    for(var i = 1; i < (heart.length - 1) ; i++){
        context.lineTo(heart[i][0], heart[i][1])

    }
    // line 1


    context.lineWidth = 2;
    context.strokeStyle = 'blue';
    context.stroke();
    </script>
  </body>
</html>

看起来像这样：

enter image description here

是否有更简单的方法来生成其他形状的坐标数据？我希望有一些工具可以让我绘制一个形状草图并为我生成坐标数据。

2 个答案:

答案 0 :(得分：6)

记录

<强> Fiddle demo

您需要一种方法来记录您的点数，以便您可以将它们重现为字符串，数组等。

这将记录您在画布上绘制的任何内容：

var points = [],    /// holds strokes and points
    isDown = false, /// for draw mode
    prevX, prevY;   /// for draw mode

第一次点击时，记录第一个点：

canvas.onmousedown = function(e) {

    /// adjust mouse position (see below)
    var pos = getXY(e);

    /// this is used to draw a line
    prevX = pos.x;
    prevY = pos.y;

    /// add new stroke
    points.push([]);

    /// record point in this stroke
    points[points.length - 1].push([pos.x, pos.y]);

    /// we are in draw mode   
    isDown = true;
}

然后，只需将所有绘制的点推到当前笔划：

canvas.onmousemove = function(e) {

    if (!isDown) return;

    var pos = getXY(e);

    /// draw a line from previous point to this        
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();

    /// set previous to this point
    prevX = pos.x;
    prevY = pos.y;

    /// record to current stroke
    points[points.length - 1].push([pos.x, pos.y]);
}

鼠标上升;在演示中，它将点生成为字符串，可以直接复制到您的JS代码中：

canvas.onmouseup = function() {
    isDown = false;
    coords.innerHTML = JSON.stringify(points);
}

我们调整鼠标位置，使其相对于画布：

function getXY(e) {
    var r = canvas.getBoundingClientRect();
    return {x: e.clientX - r.left, y: e.clientY - r.top}
}

渲染

现在我们已经记录了点数，我们需要一种方法来重现它们。

这个片段能够渲染我们刚刚记录的笔画和点 - 对于演示，我设置了红色以区分渲染的笔画并绘制：

function renderPoints(points) {

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = '#f00';

    /// get a stroke
    for(var i = 0, t, p, pts; pts = points[i]; i++) {

        /// render stroke
        ctx.beginPath();
        ctx.moveTo(pts[0][0], pts[0][2]);
        for(t = 1; p =pts[t]; t++) {
            ctx.lineTo(p[0], p[1]);
        }
        ctx.stroke();
    }
    ctx.strokeStyle = '#000';
}

结论

这颗心（？！）：

snapshot

为您制作这些要点：

  

[[[103,99]，[103100]，[103,98]，[105,93]，[115,79]，[129,61]，[139,52]，[145,49] [149,49]，[152,51]，[154,54]，[155,57]，[156,65]，[154,79]，[152,89]，[149,99]，[ 145110]，[139124]，[131142]，[118163]，[108176]，[101184]，[97185]，[94187]，[87187]，[76180]，[65166]，[60156]，[54145] [46119]，[41,98]，[39,84]，[39,81]，[39,79]，[39,77]，[39,76]，[40,75]，[42， 74]，[43,72]，[46,69]，[47,67]，[48,67]，[49,67]，[50,67]，[51,68]，[52,69] ，[54,70]，[61,75]，[71,87]，[82101]，[84105]，[87108]，[89111]，[89112]，[89113]，[89114]，[89115] [89116]，[90118]]]

可以直接将它们赋予渲染方法，或者可以通过在前面添加一些代码来使笔画/点阵列更加复杂，以允许您直接复制并粘贴生成的字符串，例如： / p> 

var code = '    var points = ' + JSON.stringify(points) + ';';

<强> Fiddle demo

答案 1 :(得分：4)

...是

如何

Adob​​e Illustrator和Inkscape等应用程序可让您使用线条和曲线通过“手”（鼠标）绘制形状。他们有一个用于创建线条的线条工具和一个用于创建曲线的钢笔工具。

插图画家可能是设计行业的“黄金标准”，但不是免费的。 Inkscape具有更少的功能（以及更多的错误）但是是免费的。

由于您的绘图由线条和曲线而非像素组成，因此您的绘图称为“矢量”绘图，而不是“像素/光栅”绘图。

<强>为什么

您的绘图由线条/曲线组成的重要性在于您可以将绘图导出为名为SVG的文件格式。如果查看导出的SVG文件，您将看到可以很容易地转换为html5画布绘图命令的命令。甚至有翻译器会自动将Illustrator / Inkscape绘图转换为html5画布。

示例

这是用4条曲线绘制的心脏。

演示：http://jsfiddle.net/m1erickson/8Ja8A/

enter image description here

以下是4条曲线的心脏代码：

context.beginPath();
context.moveTo(150,150);
context.bezierCurveTo( 150,120, 100,120, 100, 150);
context.bezierCurveTo( 100,180, 150,185, 150, 210 );
context.bezierCurveTo( 150,185, 200,180, 200, 150 );  
context.bezierCurveTo( 200,120, 150,120, 150, 150 );
context.lineWidth=2; 
context.stroke();

从这里......

你可以像这样创造你的心（或任何你想要的形状！）：

  • 使用笔（曲线）工具在Illustrator / Inkscape中绘制心形。
  • 将您的心脏导出到SVG。
  • 使用SVG文件中的曲线坐标创建html5画布曲线命令。
相关问题
最新问题