如何将画布十字准线放在画布的中央。
<canvas id="imageView" width="1400" height="788"></canvas>
十字准线应该是绘制的而不是图像。
答案 0 :(得分:1)
由于你要求居中十字准线,这里有一个更全面的例子,其中还包括一种消除锯齿的技术:
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;
如果你想测试不同的尺寸和颜色,这里有一个小游乐场:
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;
答案 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();