JavaScript Canvas十字准线在中心

时间:2017-06-14 10:19:04

标签: javascript html canvas

如何将画布十字准线放在画布的中央。

<canvas id="imageView" width="1400" height="788"></canvas>

十字准线应该是绘制的而不是图像。

2 个答案:

答案 0 :(得分:1)

由于你要求居中十字准线,这里有一个更全面的例子,其中还包括一种消除锯齿的技术:

&#13;
&#13;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// center
var x = canvas.width / 2;
var y = canvas.height / 2;

// remove aliasing
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
context.strokeWidth = 1;

context.moveTo(x, y - 10);
context.lineTo(x, y + 10);

context.moveTo(x - 10,  y);
context.lineTo(x + 10,  y);

// Line color
context.strokeStyle = 'green';

context.stroke();
&#13;
canvas {
  border: 1px solid #000;
}
&#13;
<canvas id="myCanvas" width="300" height="200"></canvas>
&#13;
&#13;
&#13;

更新

如果你想测试不同的尺寸和颜色,这里有一个小游乐场:

&#13;
&#13;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var width = document.querySelector('#width');
var height = document.querySelector('#height');
var strokeWidth = document.querySelector('#strokeWidth');
var crossHairLength = document.querySelector('#crossHairLength');
var color = document.querySelector('#color');

var widthValue = document.querySelector('#widthValue');
var heightValue = document.querySelector('#heightValue');
var strokeWidthValue = document.querySelector('#strokeWidthValue');
var crossHairLengthValue = document.querySelector('#crossHairLengthValue');
var colorValue = document.querySelector('#colorValue');

function redraw() {
  widthValue.textContent = width.value + 'px';
  heightValue.textContent = height.value + 'px';
  strokeWidthValue.textContent = strokeWidth.value + 'px';
  crossHairLengthValue.textContent = crossHairLength.value + 'px';
  colorValue.textContent = color.value;

  // dimensions
  canvas.width = width.value;
  canvas.height = height.value;
  
  // stroke parameters
  context.lineWidth = strokeWidth.value;
  context.strokeStyle = color.value;

  // center
  var x = canvas.width / 2;
  var y = canvas.height / 2;

  // remove aliasing
  x = Math.round(x) + (context.lineWidth / 2) % 1;
  y = Math.round(y) + (context.lineWidth / 2) % 1;
  
  var length = +crossHairLength.value;

  context.moveTo(x, y - length);
  context.lineTo(x, y + length);

  context.moveTo(x - length, y);
  context.lineTo(x + length, y);

  context.stroke();
}

document.addEventListener('input', redraw);

redraw();
&#13;
canvas {
  border: 1px solid #000000;
}
&#13;
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<form class="pure-form pure-form-aligned">
  <fieldset>
    <div class="pure-control-group">
      <label for="width">Width</label>
      <input id="width" name="width" type="range" min="75" max="500" value="200">
      <span id="widthValue" class="pure-form-message-inline"></span>
    </div>

    <div class="pure-control-group">
      <label for="height">Height</label>
      <input id="height" name="height" type="range" min="75" max="500" value="200">
      <span id="heightValue" class="pure-form-message-inline"></span>
    </div>

    <div class="pure-control-group">
      <label for="strokeWidth">Stroke Width</label>
      <input id="strokeWidth" name="strokeWidth" type="range" min="1" max="10" value="1">
      <span id="strokeWidthValue" class="pure-form-message-inline"></span>
    </div>

    <div class="pure-control-group">
      <label for="crossHairLength">Crosshair Length</label>
      <input id="crossHairLength" name="crossHairLength" type="range" min="5" max="25" value="15">
      <span id="crossHairLengthValue" class="pure-form-message-inline"></span>
    </div>

    <div class="pure-control-group">
      <label for="color">Color</label>
      <input id="color" name="color" type="color" value="#000000">
      <span id="colorValue" class="pure-form-message-inline"></span>
    </div>

    <div class="pure-controls">
      <canvas id="myCanvas" width="200" height="200"></canvas>
    </div>
  </fieldset>
</form>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你走了:

try:

    with open("test.csv", 'rb') as inputfile:

        reader = csv.DictReader(inputfile)
        user_input=int(raw_input("Enter the Idno to search:"))
        rows = [row for row in reader if row['Idno']==str(int(user_input)

        for row in rows:
            print rows


except ValueError:
    print "Enter correct idno "
var c =document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var x = c.width / 2;
var y = c.height / 2;

var ctx2=c.getContext("2d");

ctx.moveTo(x, y - 10);
ctx.lineTo(x, y + 10);

ctx.moveTo(x - 10,  y);
ctx.lineTo(x + 10,  y);

// Line color
ctx.strokeStyle = '#DB14C1';

ctx.stroke();