html5实现一个简单的在线画板

我们先来看看实现效果：

（推荐教程：h5）

实现代码如下：

<!DOCTY PE  ht ML >
<html>
    <head>
        < ;m eta charset="UTF-8">
        <t IT le></title>
    </head>
    <body>
        <canvas id="canvas" width="600" h ei ght="600"></canvas>
        <script type="text/javascript">
             VAR  c = document.getElementById(& # 39;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('mou SEM ove',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.be gin Path();
                    ctx.moveTo(oldx,oldy);
                    ctx.l inet o(newx,newy);
                    ctx. stroke Style = linecolor;
                    ctx.lineCap = 'round';
                    ctx.stroke();

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

免费学习视频分享：html视频教程

以上就是html5实现一个简单的在线画板的详细内容，更多请关注其它相关文章！

总结

以上是为你收集整理的 html5实现一个简单的在线画板全部内容，希望文章能够帮你解决 html5实现一个简单的在线画板所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于html5实现一个简单的在线画板的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did204424

更新时间：2023-04-30 阅读：23次