本文介绍了画布 HTML5 的 Jquery 画笔大小滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我正在尝试为我的 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.
谢谢你:)
推荐答案
简单:
创建一个
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>这篇关于画布 HTML5 的 Jquery 画笔大小滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！