gpt4 book ai didi

javascript - HTML 5 Canvas 绘制直线的示例?

转载 作者:行者123 更新时间:2023-12-03 07:40:45 25 4
gpt4 key购买 nike

我得到了这个 Canvas 绘图应用程序示例,我需要帮助理解代码的某些部分。该应用程序可以像钢笔绘图工具一样绘制出非常平滑的线条。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 10;
var dragging = false;


canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.lineWidth = radius*2;

var putPoint = function(e){
if(dragging){
context.lineTo(e.clientX, e.clientY);
context.stroke();
context.beginPath();
context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(e.clientX, e.clientY);
}
}

var engage = function(e){
dragging = true;
putPoint(e);
}

var disengage = function(){
dragging = false;
context.beginPath();
}

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body style="margin:0">
<canvas style="display:block;" id="canvas">
sorry this browser does not support HTML 5 Canvas!
</canvas>
<script src="main.js"></script>
</body>
</html>

我想提请大家注意这部分我无法理解的 JS 代码:

var putPoint = function(e){
if(dragging){
context.lineTo(e.clientX, e.clientY);
context.stroke();
context.beginPath();
context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(e.clientX, e.clientY);
}
}

我只是不明白该代码的各个部分如何相互关联并最终创建一条非常平滑的线条。

分解该代码:

context.lineTo(e.clientX, e.clientY);
context.stroke();

这段代码很简单,因为它用一条线连接了前一个坐标。但线条并不平滑,看起来很粗糙。

context.beginPath();
context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
context.fill();

这部分只是打印一个圆圈,但如果我快速移动鼠标,这些圆圈就不会相互连接。

context.beginPath();
context.moveTo(e.clientX, e.clientY);

这是代码的最后部分,使绘制线条变得非常流畅和高效。我不明白这部分代码以及它如何以任何方式关联。

请解释整个函数背后的代码逻辑以及它与每个函数的关系。

谢谢

最佳答案

该函数的概念很简单:要绘制一条“平滑”线,您基本上必须首先绘制一条正常的“粗糙”线,然后以圆结束。

分解一下,你正在这样做:

  1. 画一条“粗”线:

    context.lineTo(e.clientX, e.clientY);
    context.stroke();

    看起来像这样:

    line

  2. 添加一个圆圈以使线条“平滑”:

    context.beginPath();
    context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
    context.fill();

    这会将前一行转换为如下所示:

    smooth line

    这里你可能会想:你说“结束以一个圆圈”,那么为什么该行的开头有一个圆圈呢?嗯,实际上还有更多的圈子。每次调用该函数时,都会从鼠标的前一个已知位置到下一个已知位置绘制线条,因此一开始绘制的线条长度为零,并形成一个圆。然后鼠标继续移动,并添加更多非常小的线段,其末尾带有圆圈。画下所有以圆圈结尾的(几乎无限的)小线段,创建一条漂亮的直线。

    这也意味着线条的平滑度仅取决于绘制线条的分辨率。每秒调用该函数的次数越多,鼠标移动的速度越慢,线条就会越平滑。

  3. 将路径的当前位置移动到鼠标位置

    context.beginPath();
    context.moveTo(e.clientX, e.clientY);

    这两行只是确保下次调用该函数时,起点已经被设置。

关于javascript - HTML 5 Canvas 绘制直线的示例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35426074/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com