时间戳

首页 > 解决方案 > 如何使用输入范围更改下方画布上笔的粗细？

javascript - 如何使用输入范围更改下方画布上笔的粗细？

问题描述

如何使用 JQuery 更改画布上笔的粗细？我使用了画布，我想将范围放在画布下方，当页面加载时它应该被隐藏，点击按钮后它应该出现。 

body {
	background: #384047;
	font-family: sans-serif;
}
canvas {
	background: #fff;
	display: block;
	margin: 50px auto 10px;
	border-radius: 5px;
	box-shadow: 0 4px 0 0 #222;
cursor: url(http://s8.picofile.com/file/8333405442/download.png), pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="001.css">
    </head>
    <body>
            <canvas	width="600" height="400" ></canvas>
    </body>
</html>

标签： javascriptjquery

解决方案

这是一个示例，我将快速解释：

您不能cursor在 CSS 中更改属性的宽度和高度，只能更改 x 和 y 坐标 - 请阅读MDN 参考。因此，要渲染自定义光标，只需创建一个新Image对象，cursor: none;在画布上设置和渲染自定义光标，就像处理任何其他画布元素一样。滑块值缩放光标的宽度和高度。如果您有任何问题随时问。

var canvas = document.getElementById("c"); //define DOM content
var ctx = canvas.getContext("2d");
var slider = document.getElementById("range");
var btn = document.getElementById("btn");

var clicked = false;

var cursor = new Image(); //load img
cursor.src = "cursor.png"; //change this to your img
cursor.w = cursor.h = 50;

btn.addEventListener("click", e => { //When btn is clicked
  slider.style.display = "block"; //display range
});

c.addEventListener("mousemove", e => {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.drawImage(cursor, e.pageX - cursor.w/2, e.pageY - cursor.h/2, cursor.w, cursor.h);
});

slider.addEventListener("click", e => {
  check();
});

function check() {
  if (slider.value !== cursor.w) { //if unique value
    cursor.w = cursor.h = slider.value; //width and height scale based on slider
  }
}
canvas {
  cursor: none;
}

#range {
  display: none;
}
<canvas	id="c" width="600" height="400" ></canvas>
<input id="btn" type="button" value="activate" />
<input id="range" type="range" />

推荐阅读