怎么样用HTML5做画板的功能，代码是什么-群英

怎么样用HTML5做画板的功能，代码是什么

Admin发表于 2022-05-14 17:08:21926 次浏览

这篇文章给大家介绍了“怎么样用HTML5做画板的功能，代码是什么”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“怎么样用HTML5做画板的功能，代码是什么”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

我们先来看看实现效果：

实现代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
        <script type="text/javascript">
            var c = document.getElementById('canvas');
            var ctx = c.getContext('2d');

            //画一个黑色矩形
            ctx.fillStyle = 'black';
            ctx.fillRect(0,0,600,300);

            //按下标记
            var onoff = false;
            var oldx = -10;
            var oldy = -10;

            //设置颜色
            var linecolor = 'white';

            //设置线宽
            var linw = 4;

            //添加鼠标移动事件
            canvas.addEventListener('mousemove',draw,true);

            //添加鼠标按下事件
            canvas.addEventListener('mousedown',down,false);

            //添加鼠标弹起事件
            canvas.addEventListener('mouseup',up,false);

            function down(event) {
                onoff = true;
                oldx = event.pageX-10;
                oldy = event.pagey-10;
            }

            function up() {
                onoff = false;
            }

            function draw(event) {
                if(onoff == true) {
                    var newx = event.pageX-10;
                    var newy = event.pageY-10;
                    ctx.beginPath();
                    ctx.moveTo(oldx,oldy);
                    ctx.lineTo(newx,newy);
                    ctx.strokeStyle = linecolor;
                    ctx.lineCap = 'round';
                    ctx.stroke();

                    oldx = newx;
                    oldy = newy;
                }
            }
        </script>
    </body>
</html>

感谢各位的阅读，以上就是“怎么样用HTML5做画板的功能，代码是什么”的内容了，通过以上内容的阐述，相信大家对怎么样用HTML5做画板的功能，代码是什么已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注群英网络，群英网络将为大家推送更多相关知识点的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： html5画板

上一篇： HTML5中怎么实现图片淡入淡出的展示效果

下一篇： HTML5中怎么实现一个搜索栏，代码怎么写

相关信息推荐

C语言是否是高级语言，如何理解高级语言

2022-11-11 17:47:03　

摘要：c语言是高级语言。高级语言是一种独立于机器，面向过程或对象的语言；它并不是特指的某一种具体的语言，而是包括很多编程语言，如流行的java，c，c++，C#，pascal，python，lisp，prolog，FoxPro，中文版的C语言等。

用小程序与php实现聊天即时通讯过程是什么

2022-09-21 09:30:49　

摘要：微信小程序是现在应用比较广的流量平台之一,当小程序的流量越来越多时,就需要在小程序中接入即时通信聊天功能来实现更好的流量变现转化,下面这篇文章主要给大家介绍了关于如何利用微信小程序和php实现即时通讯聊天功能的相关资料,需要的朋友可以参考下

nginx配置文件路径及结构是什么，配置过程是怎样的

2022-06-18 17:06:24　

摘要：在前面已经演示了nginx的安装以及常用命令，这一章节重点讲解nginx的配置文件。1. nginx配置文件路径：不同安装方式，nginx的文件存放路径也有所不同。源码编译安装方式：在安装目录下的co