画布 HTML5 的 Jquery 画笔大小滑块

2022-01-17 00:00:00 jquery javascript html5-canvas

您好，我正在尝试为我的 Canvas 绘图应用程序创建一个画笔大小滑块，有人可以帮忙解决这个问题吗?我发现的一些方法与我运行应用程序的 Jquery 库不兼容.

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.

谢谢你:)

推荐答案

简单:

  1. 创建一个range类型的输入元素:

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

读取其值并应用于上下文的lineWidth:

Read its value and apply to lineWidth of the context:

$("#brushSize").on("输入", 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>

相关文章