javascript - 在 HTML Canvas 上绘制多条路径
问题描述
嗨,我的 HTML 画布有问题,它工作正常,就在我在画布上绘制时,它只是从一个触摸点开始的一个连续的长行程。是否有可能以您绘制然后停止然后再次绘制等等的方式拥有它。IE 只是用画布多次绘制而不是一个连续的笔画?喜欢能够画一张脸吗?请参阅下面我的代码。感谢任何帮助。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
canvas { border: 5px solid blue }
</style>
</head>
<body>
<canvas id="c" width="500" height="300"></canvas>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<script>
function midPointBtw(p1, p2) {
return {
x: p1.x + (p2.x - p1.x) / 2,
y: p1.y + (p2.y - p1.y) / 2
};
}
function getPattern() {
return ctx.createPattern(img, 'repeat');
}
var el = document.getElementById('c');
var ctx = el.getContext('2d');
ctx.lineWidth = 50;
ctx.lineJoin = ctx.lineCap = 'round';
var img = new Image;
img.onload = function() {
ctx.strokeStyle = getPattern();
};
img.src = "https://i.postimg.cc/rF2R0GRY/dick2.png";
var isDrawing, points = [];
var getXY = function(e) {
var source = e.touches ? e.touches[0] : e;
return {
x: source.clientX,
y: source.clientY
};
};
var startDrawing = function(e) {
isDrawing = true;
points.push(getXY(e));
event.preventDefault();
};
var keepDrawing = function(e) {
if (!isDrawing) return;
points.push(getXY(e));
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var p1 = points[0];
var p2 = points[1];
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
for (var i = 1, len = points.length; i < len; i++) {
var midPoint = midPointBtw(p1, p2);
ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
p1 = points[i];
p2 = points[i + 1];
}
ctx.lineTo(p1.x, p1.y);
ctx.stroke();
event.preventDefault();
};
var stopDrawing = function() {
isDrawing = false;
points = [];
};
el.addEventListener('touchstart', startDrawing);
el.addEventListener('mousedown', startDrawing);
el.addEventListener('touchmove', keepDrawing);
el.addEventListener('mousemove', keepDrawing);
el.addEventListener('touchend', stopDrawing);
el.addEventListener('mouseup', stopDrawing);
function clearCanvas(canvas,ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
<form id ="search">
<input type = "text" name="message" id="user_input">
<input type = "submit" value="Clear Sketchpad" id="clearbutton"
onclick="clearCanvas(canvas,ctx);">
</form>
<p><span id='display'></span></p>
</body>
</html>
解决方案
您正在清除keepDrawing
函数中的画布。尝试删除显示以下内容的行:
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
在该功能中,然后重试。您只需要在用户选择按钮时清除画布。
推荐阅读
- javascript - 合并标题链接css和脚本列表
- list - Haskell:如何附加到元组列表的列表中?
- c++ - 使用带有闭包的 lambda 回调
- python - Pycharm调试docker compose中的manage.py命令
- php - 获取 Wordpress 用户信息
- c++ - 未对 const strlen 函数执行编译器优化
- java - 如何在 Java 套接字编程中解析 index.html 文件中包含的 style.css 的路径
- ios - 即使使用 AVAudioTimePitchAlgorithmSpectral,使用 AVPlayer 慢放的音质也不够好
- javascript - 使用 FORM GET 和 IFRAME 进行 CSRF 攻击
- javascript - 有没有一种方法可以将多个字符串放入 React Native 的 .includes 中?