jjzjj

canvas画板(鼠标和触摸)

_理想主义者 2023-03-28 原文
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canves</title>
    <style>
        #canvas  {
            cursor:url(../images/pen.png),crosshair;
        }
        #canvasdiv{
            border: 1px solid #bcbcbc;
        }
    </style>
</head>
<body>
<div id="canvasdiv">
    <canvas id="canvas"></canvas>
</div>
<button type="button" class="layui-btn layui-btn-normal" id="clear" style="display: none" onclick="clear_all()" onsubmit="return false;"></button>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var base64data='';
    canvas.width="320"
    canvas.height="240"

    //页面不出现滚动滑动
    $("html,body").css("overflow","hidden").css("height","100%");
    document.body.addEventListener('touchmove', self.welcomeShowedListener, false);

    //画一个黑色矩形
    ctx.fillStyle = "rgba(225,225,225,0)";//绘制填充颜色 透明色
    ctx.fillRect(0, 0,320,240);//绘制一个被填充的矩形

    //按下标记
    var onoff = false;
    //定义起始位置
    var oldx = 0;
    var oldy = 0;
    //设置画笔颜色默认为黑色
    var linecolor = "black";
    //画笔宽度默认为4
    var linw = 4;

    //判断是触摸还是鼠标
    if (document.body.ontouchstart !== undefined) {
        //执行touch代码
        // 手指按下
        canvas.ontouchstart = e => {
            painting = true
            const event = e.touches[0]
            ctx.lineCap = 'round'
            ctx.lineJoin = 'round'
            const x = event.pageX
            const y = event.pageY
            ctx.beginPath()
            ctx.moveTo(x, y)
            ctx.lineWidth = linw
            ctx.strokeStyle = linecolor
        }
        // 手指移动
        canvas.ontouchmove = e => {
            if (!painting) {
                return
            }
            const event = e.touches[0]
            const x = event.pageX
            const y = event.pageY
            ctx.lineTo(x, y)
            ctx.stroke()
        }
        // 手指抬起
        canvas.ontouchend = () => {
            if (!painting) {
                return false
            }
            painting = false
            ctx.closePath()
        }
        // 手指离开区域
        ontouchcancel = () => {
            if (!painting) {
                return false
            }
            painting = false
            ctx.closePath()
        }
    } else {
        //鼠标移动事件,事件绑定
        // 执行mouse代码
        canvas.addEventListener("mousemove", draw);
        canvas.addEventListener("mousedown", down);
        canvas.addEventListener("mouseup", up);
    }


    // 下笔时按下标记打开,给oldx、oldy赋值
    function down(event) {
        onoff = true;
        oldx = event.pageX;
        oldy = event.pageY;
    }

    //检测鼠标离开后,按下标记关闭
    function up() {
        onoff = false;
    }

    //画图,按下标记打开
    function draw(event) {
        if (onoff == true) {
            var newx = event.pageX ;
            var newy = event.pageY;
            // 起始一条路径,或重置当前路径。
            ctx.beginPath();
            // 把路径移动到画布中的指定点,不创建线条。
            ctx.moveTo(oldx, oldy);
            // 添加一个新点,然后在画布中创建从该点到最后指定点的线条。
            ctx.lineTo(newx, newy);
            // 设置或返回用于笔触的颜色、渐变或模式。
            ctx.strokeStyle = linecolor;
            // 设置或返回当前的线条宽度。
            ctx.lineWidth = linw;
            // 设置或返回线条的结束端点样式。
            ctx.lineCap = "round";
            // 绘制已定义的路径。
            ctx.stroke();
            oldx = newx;
            oldy = newy;
        }
    }

    // 生成图片
    function generate_picture() {
            const dataImg = new Image();
            // canvas生成图片
            dataImg.src = canvas.toDataURL('image/png');
    };

    //清理画布
    function clear_all() {
            ctx.fillStyle = 'rgba(225,225,225,0)';
            ctx.fillRect(0, 0, 320,240);
    };

    // 下载图片
    function download_picture() {
        const dataImg = new Image();
        dataImg.src = canvas.toDataURL('image/png');
        document.querySelector('#image').appendChild(dataImg)
        const alink = document.createElement("a");
        alink.href = dataImg.src;
        alink.download = "testImg.jpg";
        alink.click();
    }
</script>
</html>

 


 

有关canvas画板(鼠标和触摸)的更多相关文章

  1. ruby - 在 ruby​​ Selenium 中移动鼠标(move_to) - 2

    我正在尝试使用Ruby中的SeleniumWebDriver2.4模拟鼠标移动如果我运行测试,是否应该看到鼠标在我的屏幕上移动?我很困惑。我试过很多不同的方法示例代码:require'selenium-webdriver'driver=Selenium::WebDriver.for:firefoxdriver.navigate.to'http://www.google.com'element=driver.find_element(:id,'gbqfba')那我试过了driver.action.move_to(element).performdriver.mouse.move_to(e

  2. ruby-on-rails - Facebook Canvas 应用程序不保存 session - 2

    我制作了一个测试facebook应用程序只是为了玩玩,我正在使用session来存储身份验证。我正在使用omniauth。当我从http://fbbtest.heroku.com/登录时然后刷新页面,session仍然保存,它说我已经登录。当我从Canvas上尝试时http://apps.facebook.com/herokutestapp/它让我登录,重定向回来并说我已登录但是当我手动刷新它然后说我没有登录。我必须对rails3中的session做一些特别的事情以便它也可以在FacebookCanvas?这是我目前在我的Controller和View中拥有的内容defindexend

  3. ruby - 如何将鼠标悬停在(鼠标悬停)Selenium Ruby 中的元素上? - 2

    有人知道如何在SeleniumRubyWebdriver中将鼠标悬停在元素上吗?我的代码是这样的:el=driver.find_element(:css=>"#foo")driver.move_toel#HowdoItriggeramouseovereventonthiselement?我在Linux32位的Firefox中使用selenium-webdrivergem。 最佳答案 我使用了driver.action.move_to(el).perform,它与其他答案略有不同,所以我想为了完整起见我会把它包括在内。

  4. ruby - 为什么 Gosu 隐藏我的鼠标指针? - 2

    我正在使用Gosugem进行一些图形编程。问题是,当我创建一个窗口时,我的鼠标指针被隐藏了。我可以猜到鼠标在某个时刻的位置,我可以凭直觉点击,但我的用户可能不会。如何显示指针? 最佳答案 如果你想使用系统光标你可以这样做classWindow查看libgosu的文档RubyGosurdocReference/Window 关于ruby-为什么Gosu隐藏我的鼠标指针?,我们在StackOverflow上找到一个类似的问题: https://stackoverf

  5. 从零开始编写Web自动化测试脚本(六)--鼠标、键盘操作 - 2

    第一章Selenium+WebDriver环境搭建第二章Selenium定位方式第三章元素常用属性第四章自动化中的三种等待第五章自动化浏览器设置及句柄、窗口切换操作第六章鼠标、键盘操作第七章javascript在自动化中的应用第八章unittest&断言第九章ddt数据驱动第十章测试框架搭建过程Python+Selenium+BeautifulReport文章目录一、鼠标操作二、键盘操作一、鼠标操作1、在web测试中,鼠标的操作包含在ActionChains类中,经常用到的有单击、双击、右击、拖动等操作。2、在使用鼠标操作前需要先导入ActionChains类包:fromselenium.we

  6. ruby - 如何使用 Ruby 将键盘和鼠标命令发送到底层操作系统? - 2

    是否有操作系统中立的方式让Ruby将键盘和鼠标事件发送到底层操作系统?(对我而言)一个明显的方法是使用Ruby/Java绑定(bind)并使用java.awt.Robot,但这看起来很愚蠢。 最佳答案 对于Mac:geminstallrb-appscript然后你可以用这样的脚本来测试它:require"rubygems"require"appscript"includeAppscriptapp("TextEdit").activateapp("SystemEvents").keystroke("LookMa,keystrokes!

  7. 前端基于DOM或者Canvas实现页面水印 - 2

    🐱个人主页:不叫猫先生🙋‍♂️作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!💫系列专栏:vue3从入门到精通、TypeScript从入门到实践📢资料领取:前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流:博主建立了一个前端交流群,汇集了各路大神,一起交流学习,期待你的加入!(文末有我wx或者私信)目录前言一、vue自定义指令directive讲解二、基于DOM的实现方式1.思路整理2.新建index.vue3.新建`directives`文件4.在`directives`文件下创建`index.ts`文件5.在`main.ts`中全局引

  8. ruby - 为什么我将鼠标悬停在 Ruby 文件的任何单词上时会收到弹出消息? - 2

    如果我将鼠标悬停在Ruby文件的任何单词上,我会收到一条工具提示消息。该弹出消息的屏幕截图位于popupmessage.cat~/.gvimrc返回:function!SyntaxBalloon()letsynID=synID(v:beval_lnum,v:beval_col,0)letgroupID=synIDtrans(synID)letname=synIDattr(synID,"name")letgroup=synIDattr(groupID,"name")returnname."\n".groupendfunctionsetballoonexpr=SyntaxBalloon()

  9. ruby-on-rails - 为什么使用触摸时after_save不触发? - 2

    最近几天,我尝试使用Redis存储来缓存Rails应用程序。我有两个模型:classCategory和classProduct在Controller中defindex@products=$redis.get('products')if@products.nil?@products=Product.joins(:category).pluck("products.id","products.name","categories.name")$redis.set('products',@products)$redis.expire('products',3.hour.to_i)end@pro

  10. 鼠标单击ClistBox的非项目区域 - 2

    我想知道用户何时在clistbox中单击,但在任何项目之外。我希望在包含的对话框中收到一些通知,以便我可以处理点以确定是否在项目内部通过mylistbox.ItemFromPoint(flags,outside)。但是,在列表框中的单击似乎并没有导致此类事件。我应该在父母对话框中寻找什么活动,以及需要设置什么才能启用?我真的不在乎是点击还是只是鼠标。我的目的是,如果用户单击任何项​​目,请取消选择所有项目,mylistbox.SetCurSel(-1).附录:这是按照@mercurydime建议实现的类的完整代码。(标题)#ifndefINCLUDE_CMYLISTBOX_H#defineIN

随机推荐