Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - HTML5 Javascript 画笔

In lại 作者：行者123 更新时间：2023-11-30 12:29:44 26 4
mua khóa gpt4 Nike

我需要创建一个干净光滑的不透明画笔。

这是我需要的一个绘图线示例:nhập mô tả hình ảnh ở đây

我得到的第二张图片: nhập mô tả hình ảnh ở đây

虽然我移动光标的速度更快，但绘图线上的圆圈却变少了

    var el = document.getElementById('c');
    var ctx = el.getContext('2d');
    ctx.lineJoin = "round"
    ctx.strokeStyle = "#000000"; 
    ctx.globalAlpha = "0.2"; 
    ctx.lineWidth = 30; 
    ctx.globalCompositeOperation = "source-over";

    var isDrawing, lastPoint;

    el.onmousedown = function(e) {
        isDrawing = true;
        lastPoint = { x: e.clientX, y: e.clientY };
    };

    el.onmousemove = function(e) {
    if (!isDrawing) return;

        var currentPoint = { x: e.clientX, y: e.clientY };

        ctx.beginPath();
        ctx.moveTo(lastPoint.x, lastPoint.y);
        ctx.lineTo(currentPoint.x, currentPoint.y);
        ctx.closePath();
        ctx.stroke();

        lastPoint = currentPoint;
    };

    el.onmouseup = function() {
        isDrawing = false;
    };

    function clearit() {
        ctx.clearRect(0,0, 1000, 1000);
    }
canvas { border: 1px solid #ccc }

1 Câu trả lời

您的问题是，在 mousemove 中，您开始和关闭了很多路径，因此线条的不透明度过载。

如果你添加:

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(250,250);
ctx.lineTo(200,100);
ctx.stroke();

你可以看到效果被移除了。

部分解决方案(你看不到你在画什么)是这样的:

 el.onmousedown = function(e) {
        isDrawing = true;
        lastPoint = { x: e.clientX, y: e.clientY };
        ctx.beginPath();
        ctx.moveTo(lastPoint.x, lastPoint.y);
    };

    el.onmousemove = function(e) {
    if (!isDrawing) return;

        var currentPoint = { x: e.clientX, y: e.clientY };      
        ctx.lineTo(currentPoint.x, currentPoint.y);
        lastPoint = currentPoint;
    };

    el.onmouseup = function() {
        isDrawing = false;
        ctx.closePath();
        ctx.stroke();
    };

现在我们用 mousedown 开始路径，在 mousemove 中“绘制”路径，并用 mouseup 描边路径。我不确定“closePath()”效果，但内圈消失了。

关于javascript - HTML5 Javascript 画笔，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28105192/

26 4 0
Bài viết được đề xuất: c# - 无法按名称从 C# 中的列表框中删除 StackPanel
Bài viết được đề xuất: ios - 找不到 downloadimageurl 来下载 Collection View 单元格图像的图像
Bài viết được đề xuất: c# - 使用主题等 WPF 样式
Bài viết được đề xuất: c# - 应用程序运行时替换exe文件
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com