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

来源：互联网 2024-10-13 03:07:54

我们先来看看实现效果：

（推荐教程：h5）

实现代码如下：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <canvas id="canvas" width="600" height="600"></canvas>        <ｓｃｒｉｐｔ type="text/javascript">            var c = document.getElementById(&#39;canvas&#39;);            var ctx = c.getContext(&#39;2d&#39;);            //画一个黑色矩形            ctx.fillStyle = &#39;black&#39;;            ctx.fillRect(0,0,600,300);            //按下标记            var onoff = false;            var oldx = -10;            var oldy = -10;            //设置颜色            var linecolor = &#39;white&#39;;            //设置线宽            var linw = 4;            //添加鼠标移动事件            canvas.addEventListener(&#39;mousemove&#39;,draw,true);            //添加鼠标按下事件            canvas.addEventListener(&#39;mousedown&#39;,down,false);            //添加鼠标弹起事件            canvas.addEventListener(&#39;mouseup&#39;,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 = &#39;round&#39;;                    ctx.stroke();                    oldx = newx;                    oldy = newy;                }            }        </ｓｃｒｉｐｔ>    </body></html>

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

在线画板

本文地址：http://www.wztg.net/wenda/70056.html

免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）