javascript - 如何使用?
问题描述
我想要它,这样当用户在 1st 中输入一个数字时input
,ctx.lineWidth
等于输入的值。第二个input
是假设确认数字的输入并运行size()
等于 1st 的值input
与新值的函数ctx.lineWidth
是_
const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
//default color
ctx.strokeStyle = "black";
window.addEventListener('load', () => {
let painting = false;
//when mouse is clicked; paint
function mousedown(b) {
painting = true;
//allows for paint to appear without nedding to drag mouse
mousemove(b);
}
//when mouse is not clicked; don't paint
function mouseup() {
painting = false;
//resets path each time so multiple can be created
ctx.beginPath();
}
function mousemove(b) {
//Get correct mouse position
var pos = getMousePos(c, b);
//if not holding down the mouse; nothing happens
if (!painting) return;
//roundness of paint
ctx.lineCap = 'round';
//create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
ctx.lineTo(pos.x, pos.y);
//end the stroke and visualize paint
ctx.stroke();
//begins a new paint so that everything doesn't just stick to a fat line
ctx.beginPath();
//move the new line to wherever the mouse goes
ctx.moveTo(pos.x, pos.y);
}
//starting posistion of paint line
c.addEventListener('mousedown', mousedown);
//ending posistion of paint line
c.addEventListener('mouseup', mouseup);
//whenever the mouse is moving; paint
c.addEventListener('mousemove', mousemove);
});
function size() {
const num = document.getElementById("sizeInput").value;
ctx.lineWidth = num;
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
#c {
border: 1px solid black;
}
#container {
align-content: left;
}
.size {
width: 13em;
height: 3em;
}
<div id="container">
<h2>SIZE:</h2>
<form>
<input class="size" type="number" step="1" id="sizeInput" placeholder="Type a number only" value="15">
<input onclick="size()" type="button" value="confirm">
<p id="number"></p>
</form>
<canvas id="c"></canvas>
</div>
我希望从以下位置const num
获取.value
输入:
<input class="size" type="number" step="1" id="sizeInput" placeholder="Type a number only" value="15">
该信息用于将 分配ctx.lineWidth
给 的值const num
。
解决方案
将事件侦听器附加到您的按钮,而不是使用onclick
.
以下修改后的代码应该可以工作
const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
//default color
ctx.strokeStyle = "black";
let confirmButton = document.querySelector(".confirm");
window.addEventListener('load', () => {
let painting = false;
//when mouse is clicked; paint
function mousedown(b) {
painting = true;
//allows for paint to appear without nedding to drag mouse
mousemove(b);
}
//when mouse is not clicked; don't paint
function mouseup() {
painting = false;
//resets path each time so multiple can be created
ctx.beginPath();
}
function mousemove(b) {
//Get correct mouse position
var pos = getMousePos(c, b);
//if not holding down the mouse; nothing happens
if (!painting) return;
//roundness of paint
ctx.lineCap = 'round';
//create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
ctx.lineTo(pos.x, pos.y);
//end the stroke and visualize paint
ctx.stroke();
//begins a new paint so that everything doesn't just stick to a fat line
ctx.beginPath();
//move the new line to wherever the mouse goes
ctx.moveTo(pos.x, pos.y);
}
//starting posistion of paint line
c.addEventListener('mousedown', mousedown);
//ending posistion of paint line
c.addEventListener('mouseup', mouseup);
//whenever the mouse is moving; paint
c.addEventListener('mousemove', mousemove);
confirmButton.addEventListener('click', size);
});
function size() {
const num = document.getElementById("sizeInput").value;
ctx.lineWidth = num;
console.log("blah "+ ctx.lineWidth)
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
#c {
border: 1px solid black;
}
#container {
align-content: left;
}
.size {
width: 13em;
height: 3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<h2>SIZE:</h2>
<form>
<input class="size" type="number" step="1" id="sizeInput" placeholder="Type a number only" value="15">
<input class="confirm" type="button" value="confirm">
<p id="number"></p>
</form>
<canvas id="c"></canvas>
</div>
推荐阅读
- python - Keras 模型无法预测
- java - 连接本地容器docker
- kotlin - Alias 带参数的 Annotation
- python - Kinesis 订阅分片
- python-3.x - MechanicalSoup 可以登录到需要 SAML 身份验证的页面吗?
- python - 给定边 e,在 Python 中找到包含 e 的路径集的最快方法是什么?
- jdbc - Kafka Connect JDBC 接收器提交
- apache-superset - 更新过滤器上的时间过滤器不会更新下拉列表过滤器数据
- python - Python setup.py:找不到合适的 Requirement.parse('tensorflow') 分布
- r - 从互斥虚拟变量创建分类变量