canvas 需要修正图纸尺寸

Question

在我的 Canvas 上，当你改变尺寸时，我有它，所以你可以从 1 到 100，但我有它，所以它会上升到 5，但是当你达到 1 并再次上升时，它会变为6 然后再上升到 11 等等。

这里是http://jsfiddle.net/daniel9000/tsaytohj/2/

这是我的 java 脚本

function processData(c1, c2) {
var cv1 = document.getElementById(c1).value;
var cv2 = document.getElementById(c2).value;
alert(cv1 + "\n" + cv2);
}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 10;
var dragging = false;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

context.lineWidth = radius * 2;

var putPoint = function (e) {
if (dragging) {
var bounds = canvas.getBoundingClientRect();
var mouseX = e.clientX + bounds.left;
var mouseY = e.clientY - bounds.top;
var mouseX = e.clientX + bounds.left - 0;
context.lineTo(mouseX, mouseY)
context.strokeStyle = document.getElementById('color1').value;
context.stroke();
context.beginPath();
context.arc(mouseX, mouseY, radius, 0, Math.PI * 2);
context.fillStyle = document.getElementById('color1').value;
context.fill();
context.beginPath();
context.moveTo(mouseX, mouseY);
}
}

var engage = function (e) {
dragging = true;
putPoint(e);
}

var disengage = function () {
dragging = false;
context.beginPath();
}

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);

var setRadius = function (newRadius) {
if (newRadius < minRad) newRadius = minRad;
else if (newRadius > maxRad) newRadius = maxRad;
radius = newRadius;
context.lineWidth = radius * 2;

radSpan.innerHTML = radius;
}

var minRad = 1,
maxRad = 100,
defaultRad = 20,
interval = 5,
radSpan = document.getElementById('radval'),
decRad = document.getElementById('decrad'),
incRad = document.getElementById('incrad');

decRad.addEventListener('click', function () {
setRadius(radius - interval);
});
incRad.addEventListener('click', function () {
setRadius(radius + interval);
});

setRadius(defaultRad);

var button = document.getElementById('btn-download');
button.addEventListener('click', function (e) {
var dataURL = canvas.toDataURL('image/png');
button.href = dataURL;
});

Answer 1

这真的很简单。我建议这样做：

decRad.addEventListener('click', function () {
    setRadius(radius - interval);
});
incRad.addEventListener('click', function () {
    setRadius(radius < interval ? interval : radius + interval);
});

Answer 2

因为你设置了minRad = 1，不是5的倍数序列，估计是为了避免半径为零。所以当你加 5 时，你得到 6 而不是 5。你有几种可能的解决方案：

设置最小半径 = 0
只允许最小半径为 5，即 minRad = 5
如果不是上述任何一个，那么您必须通过将 radius = newRadius; 替换为
来补偿使用不按顺序的最小值
```
radius = newRadius;
if( radius == 6) radius = 5;
```

canvas 需要修正图纸尺寸

canvas drawing size fix needed

html

javascript

canvas