Question

我希望有人能提供帮助。我正在做一个绘图应用程序。我正在尝试使用滑块调整画布上的线宽。如果用户在滑块上选择2，然后线宽应细，40将是很粗的线。提前谢谢了，菲利普

这是我的HTML

<div id="theLineWidthSection" style="float:right; margin-right:170px; 
margin-top:-42px; position:relative;z-index:9999; cursor:pointer; 
overflow:hidden;">
Size: <input type="range" id="theLineWidth" min="2" max="40" 
value="2" title="Line width"> 
</div>

这是我的Javascript

$('#theLineWidth').change(function () {
var canvas = document.getElementById('drawingCanvas');
var lineSize = document.getElementById('theLineWidth');
var mySize = lineSize.value;

lineSize.addEventListener('change', changeLineWidth);

function changeLineWidth(){
mySize = lineSize.value;
context.lineWidth = mySize;
context.lineWidth = lineSize.value;        
}    
});

更改滑块后，线宽不变。

Answer 1

问题在于，您在应用线宽更改之前没有拿过画布context。这应该解决它：

var canvas = document.getElementById('drawingCanvas');
var context = canvas.getContext("2d")
var lineSize = document.getElementById('theLineWidth');
var mySize = lineSize.value;

$('#theLineWidth').change(function () {
mySize = lineSize.value;
context.lineWidth = mySize;      
});

此外，将变量从函数中删除。每次触发change事件时，都无需重新定义它们。

Answer 2

这是一个演示，其中我使用滑块更改画布上的线宽。我正在使用的事件是input，当输入值更改时会触发。

希望对您有帮助。

var canvas = document.getElementById('drawingCanvas');
var context = canvas.getContext("2d");
var mySize = 2;
//draw something on the canvas
draw();

theLineWidth.addEventListener("input",function () {
var mySize = theLineWidth.value;
// change the line width
context.lineWidth = mySize;

draw();
});


// a function that is drawing something on the canvas
function draw(){
//first clear the context
  context.clearRect(0,0,canvas.width,canvas.height);
  // next draw 
  context.beginPath();
  context.moveTo(10,75);
  context.lineTo(290,75);
  context.stroke();
}

#theLineWidthSection {
  float: right;
  margin-right: 170px;
  /* margin-top: -42px;*/
  position: relative;
  z-index: 9999;
  cursor: pointer;
  outline:1px solid;
  /*overflow: hidden;*/
}

canvas{border:1px solid}

<div>
Size: <input type="range" id="theLineWidth" min="2" max="40" 
value="2" title="Line width"> 
</div> 
<canvas id="drawingCanvas"></canvas>

使用javascript / jquery中的滑块更改画布上的线宽

2 个答案: