使用canvas建立一个可以使用彩笔、橡皮檫的画板

最新推荐文章于 2024-06-07 09:59:54 发布

原创最新推荐文章于 2024-06-07 09:59:54 发布 · 444 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何使用HTML5的canvas元素创建一个带有彩笔和橡皮擦功能的画板。通过添加颜色选择器和画布，结合CSS设置边框效果，并在JavaScript中编写代码实现画板的基本操作。虽然作者作为初学者，对编辑区的操作不熟练，但这是一个很好的学习实践案例，欢迎读者提供改进意见。

使用canvas建立一个可以使用彩笔、橡皮檫的画板

我参加了一个web学习班，因为了解到写博客可以有效提高我的知识掌握水平，所以决定从我学习的内容来入手，废话不多说，开始今天的学习。
首先我们要在<body>中创建我们需要的标签，代码如下。
其中<input type="color">是颜色选择器，<select><option>画笔</option></select>是下拉选择标签，<canvas></canvas>就是画布。

<body>
    请选择颜色
    <input type="color">
    请选择工具
    <select>
        <option>画笔</option>
        <option>橡皮</option>
    </select>
    画笔大小
    <select>
        <option>1px</option>
        <option>2px</option>
        <option>3px</option>
        <option>4px</option>
        <option>5px</option>
        <option>6px</option>
        <option>7px</option>
        <option>8px</option>
        <option>9px</option>
        <option>10px</option>
    </select>
    橡皮大小
    <select>
        <option>1px</option>
        <option>4px</option>
        <option>6px</option>
        <option>8px</option>
        <option>10px</option>
    </select>
    <input type="button" value="清除">
    <canvas width="1000" height="500"></canvas>
</body>

然后我们在CSS里为画布添加边框效果使它显示。

    <style>
        canvas{
            border: 1px solid;
            margin-top: 15px;
        }
    </style>

然后在JS对效果进行编辑，

<script>
    var cas=document.getElementsByTagName("canvas")[0]//获取一下body中的标签的值
    var sel=document.getElementsByTagName("select")
    var inp=document.getElementsByTagName("input")
    var pen=cas.getContext("2d")          //创建画笔
    cas.οnmοusedοwn=function(ev){         //创建鼠标在canvas上的点击动作
        var x=ev.clientX-cas.offsetLeft   //获取画笔显示X轴位置=鼠标X轴位置-canvas距浏览器顶部的距离
        var y=ev.clientY-cas.offsetTop    //获取画笔显示Y轴位置=鼠标Y轴位置-canvas距浏览器左边的距离
        pen.beginPath()                   //重新开始一条路径，避免鼠标两次点击的线相连
        pen.lineCap="round"               //线帽，设置线的端点为圆形
        pen.lineJoin="round"              //线相交点，设置线的拐角为有弧度的
        pen.moveTo(x,y)                   //线的起始点
        cas.οnmοusemοve=function(ev1){    //创建鼠标在canvas上的移动动作
        var x1=ev1.clientX-cas.offsetLeft //获取画笔显示X轴位置=鼠标X轴位置-canvas距浏览器顶部的距离
        var y2=ev1.clientY-cas.offsetTop  //获取画笔显示Y轴位置=鼠标Y轴位置-canvas距浏览器左边的距离
        pen.lineTo(x1,y2)                 //线的另一个端点
        if(sel[0].value=="橡皮"){         //如果“请选择工具”的选项值为“橡皮”
            pen.lineWidth=parseInt(sel[2].value)//线的宽度为“橡皮大小”的选项值
            pen.strokeStyle="white"             //线的笔触颜色为白色（因为canvas背景为白色）
            pen.stroke()                        //线的笔触效果
        }else{                                  //如果“请选择工具”的选项值不是“橡皮”
            pen.lineWidth=parseInt(sel[1].value)//线的宽度为“画笔大小”的选项值
            pen.strokeStyle=inp[0].value        //线的笔触颜色为颜色选择器中的值
            pen.stroke()                        //线的笔触效果
        }
        }
        document.οnmοuseup=function(){          //创建鼠标抬起的动作
            cas.οnmοusemοve=null                //鼠标在canvas上的移动动作为空
        }
    }
    inp[1].οnclick=function(){                  //为“清除”按钮创建动作         
        pen.clearRect(0,0,1000,500)             //清除矩形，顶点坐标为（0，0），矩形大小为（1000，500）
    }
</script>

因为是第一次写，编辑区的功能、操作不太熟悉，希望大家多多担待。这是小白的一个作业，有什么不足之处希望大佬能指出。

标签