HTML5 Canvas代码：需要帮助将手绘垂直线更改为水平

Question

这是参考https://stackoverflow.com/a/6373008/1247334。

概述：尝试利用引用的HTML5 Canvas代码在我的页面上同时填充垂直和单独的水平线，分别填充其容器的高度和宽度。

是的，通常只会使用CSS边框，但需要手绘＆＃34;寻找这些线。是的，可以只使用图形，但只是尝试新的东西，看看文件大小是否比图形选项小。

从上面引用的链接中，Simon的小提琴＃16的代码就是我用作我的起点：

• Simon的代码@ jsfiddle.net/GfGVE/16
• 我的版本@ codepen.io/syberknight/pen/gpgxqX

...在此之前对Canvas代码一无所知，因为你可以看到我已经能够找到一些东西 - 最值得注意的是，一条让线延伸（绘制，而不是伸展）的方法为100它的百分比是**容器（不是窗口）。

但我已经陷入了试图使这个横向变化的问题。而不是垂直（实际上需要两者）。

我已经尝试了多次逆转＆＃34; x＆＃34; ＆安培; ＆＃34; Y＆＃34;整个选项，但到目前为止只有codepen.io/syberknight/pen/BNpwKO

的混乱

Answer 1

您可以使用画布转换将垂直线转换为水平线。

context.translate将重新定位画布的[0,0]原点。

context.rotate将按指定角度旋转任何新绘图。

以下是示例代码和演示：

＆＃13;

＆＃13;

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var lastControl = 0;

function addJitteryBezier(fromx, fromy, tox, toy) {
  var diffx = tox - fromx;
  var diffy = toy - fromy;

  var neg = Math.random()*diffy/5; // so the x value can go positive or negative from the typical


  var cp1x = -neg + fromx + 2*(Math.random()*diffy/8);
  var cp2x = -neg + fromx + 2*(Math.random()*diffy/8);

  if (lastControl < fromx) { // if last control was negative, make this one positive
    cp1x = fromx + fromx - cp1x;
  } else {
    cp1x = fromx - (cp1x - fromx);
  }
  lastControl = cp2x;

  ctx.bezierCurveTo(
    cp1x, fromy + .3*diffy,
    cp2x, fromy + .6*diffy,
    tox, toy
  );  
}

// save the untranslated and unrotated context state
ctx.save();

// use translate to push the canvas origin down by 100px
ctx.translate(0,100);

// rotate all new drawings by -90 degrees
ctx.rotate(-Math.PI/2);

ctx.beginPath();
ctx.moveTo(50,0);

var i = 0;
while (i < 500) {
  addJitteryBezier(50, i, 50, i+50);
  i+=  50;
}

ctx.stroke();

// restore the context state to its untranslated and unrotated state
ctx.restore();

＆＃13;

<canvas id="canvas1" width=500 height=500></canvas>

＆＃13;

＆＃13;

＆＃13;