用于画布HTML5的Jquery画笔大小滑块

Question

您好我试图为我的Canvas绘图应用创建画笔大小滑块，是否有人能够协助如何解决这个问题？我发现的一些方法与我运行应用程序的Jquery库不兼容。

谢谢你:)

Answer 1

您的问题在细节上有点简短：-O

以下是如何使用输入类型范围来更改context.lineWidth。

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var isDown=false;
var startX,startY;

ctx.lineCap='round';
var linewidth=5;
ctx.lineWidth=linewidth;
$myslider=$('#myslider');
$myslider.attr({min:1,max:25}).val(linewidth);
$myslider.on('input change',function(){
    linewidth=ctx.lineWidth=parseInt($(this).val());
});

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUpOut(e);});
$("#canvas").mouseout(function(e){handleMouseUpOut(e);});

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  isDown=true;
}

function handleMouseUpOut(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  // Put your mouseup stuff here
  isDown=false;
}

function handleMouseMove(e){
  if(!isDown){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  ctx.beginPath();
  ctx.moveTo(startX,startY);
  ctx.lineTo(mouseX,mouseY);
  ctx.stroke();
  
  startX=mouseX;
  startY=mouseY;
}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag mouse to draw variable width line.</h4>
Line Width:&nbsp <input id=myslider type=range><br>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

易：

1. 创建range类型的输入元素：

   <input type=range min=1 max=100 id=brushSize>
   
   

2. 读取其值并应用于上下文的lineWidth：

   $("#brushSize").on("input", function(e) { ctx.lineWidth = $(this).val() });

$("#brushSize").on("input", function(e) {
  var v = $(this).val();            // brush size value, example usage:
  //ctx.lineWidth = v;              // context line-width
  $("#val").html($(this).val());    // textual repr.
  $("#val").width(v).height(v);     // brush size rep.
});

#val {
  display:inline-block;
  border-radius:50%;
  background:#000;
  color:#f00;
  width:50px;
  height:50px;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type=range min=1 max=100 id=brushSize> <span id=val>50</span>