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

Question

Hello I'm trying to create a brush size slider for my Canvas drawing app, would anyone be able to assist in how to go about this?? A few of the approaches I have found weren't compatible with my Jquery library that I have running my app.

thank you :)

Answer 1

Your question is a bit brief on details :-O

Here's how to use an input-type-range to change context.lineWidth .

 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; } 

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

 <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> 

Answer 2

Easy:

1. Create an input element of type range :

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

2. Read its value and apply to lineWidth of the context:

   $("#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>