Question

我正在为这篇帖子HTML5 Canvas and Line Width做贡献但由于它不是官方答案而被删除，因为从技术上讲，我也使用以下代码提出问题，所以我遇到了同样的问题。 “我正在画布上绘制线图。线画得很好。图形被缩放，绘制了每个段，颜色还可以，等等。我唯一的问题是线宽在视觉上是变化的。这几乎就像书法的笔尖一样。笔。如果笔划是向上，则线条较细；如果笔划是水平，则线条较粗。

我的线条粗细是恒定的，并且我的strokeStyle设置为黑色。我看不到画布的任何其他属性会影响如此变化的线宽，但必须存在。 “

<html>
<head>
  <style>html{font-family:Verdana;}</style>
	
<script type="text/javascript">

var canvas ;
var context ;
var Val_max;
var Val_min;
var sections;
var xScale;
var yScale;


var Samsung = [21000,21000,23000,22000,22000,23000,23000];

function init() {
		// set these values for your data 
	sections = 7;
	Val_max = 25000;
	Val_min = 10000;
	var stepSize = 1500;
	var columnSize = 75;
	var rowSize = 75;
	var margin = 10;
	var xAxis = [""," Monday "," Tuesday"," Wednesday"," Thursday"," Friday"," Saturday"," Sunday"]//;
		//

	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	context.fillStyle = "#4d4d4d"
	context.font = "10 pt Arial"
	
	yScale = (canvas.height - columnSize - margin) / (Val_max - Val_min);
	xScale = (canvas.width - rowSize) / sections;
	
	context.strokeStyle="#4d4d4d"; // color of grid lines
	context.beginPath();
		// print Parameters on X axis, and grid lines on the graph
	for (i=1;i<=sections;i++) {
		var x = i * xScale;
		context.fillText(xAxis[i], x,columnSize - margin);
		context.moveTo(x, columnSize);
		context.lineTo(x, canvas.height - margin);
	}
		// print row header and draw horizontal grid lines
	var count =  0;
	for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
		var y = columnSize + (yScale * count * stepSize); 
		context.fillText(scale, margin,y + margin);
		context.moveTo(rowSize,y)
		context.lineTo(canvas.width,y)
		count++;
	}
	context.stroke();
	context.lineWidth=20;	
	context.translate(rowSize,canvas.height + Val_min * yScale);
	context.scale(1,-1 * yScale);
	
		// Color of each dataplot items
		
	context.strokeStyle="#2FBC3A";
	plotData(Samsung);
}

function plotData(dataSet) {
//	context.beginPath();
//	context.moveTo(0, dataSet[0]);
//	for (i=1;i<sections;i++) {
//		context.lineTo(i * xScale, dataSet[i]);
//	}
//	context.stroke();

	var love=0;
	for (i=1;i<sections;i++) {
	context.beginPath();
	context.moveTo(love, dataSet[i-1]);
	context.lineTo(i * xScale, dataSet[i]);
	love=i*xScale;
	context.stroke();
	}

}

</script>
</head>

<body onLoad="init()">
<div align="center">
<canvas id="canvas" height="400" width="650">
</canvas>
<br>
	<!--Legends for Dataplot -->
<span style="color:#4d4d4d"> Graph </span>  
</div>
</body>
</html>

Answer 1

您正在以不统一的方式更改上下文的scaleY。
因此，此操作后的所有图形都会在Y轴上缩小。

为避免这种情况，请在绘制图形时将这种缩放比例仅应用于坐标，即

context.scale(1, -1 * yScale);
...
context.lineTo(x, y);

成为

context.lineTo(x, y * -1 * yScale);

这样，您的坐标可以正确缩放，但是笔触仍保持正确的缩放比例。

另外，您要分别绘制每个线段，这会在每个线段之间产生一些孔，因此我可以自由地将它们合并到单个子路径中。

var canvas;
var context;
var Val_max;
var Val_min;
var sections;
var xScale;
var yScale;


var Samsung = [21000, 21000, 23000, 22000, 22000, 23000, 23000];

function init() {
  // set these values for your data 
  sections = 7;
  Val_max = 25000;
  Val_min = 10000;
  var columnSize = 75;
  var rowSize = 75;
  var margin = 10;

  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  context.fillStyle = "#4d4d4d";

  yScale = (canvas.height - columnSize - margin) / (Val_max - Val_min);
  xScale = (canvas.width - rowSize) / sections;

  context.lineWidth = 20;
  context.translate(rowSize, canvas.height + Val_min * yScale);
//context.scale(1,-1 * yScale);
// ^-- Don't do that.

  context.strokeStyle = "#2FBC3A";
  plotData(Samsung);
}

function plotData(dataSet) {
  var love = 0;
  // make a single path from all the segments
  context.beginPath();
  for (var i = 0; i < sections; i++) {
    // Here we scale the coordinate, not the drawings
    context.lineTo(i * xScale, dataSet[i] * -1 * yScale);
    love = i * xScale;
  }
  context.stroke();

}
init();

<canvas id="canvas" height="400" width="650">
</canvas>

HTML5画布行中的可变线宽

1 个答案: