canvas 画板

最新推荐文章于 2023-07-31 22:39:20 发布

打八阿哥

最新推荐文章于 2023-07-31 22:39:20 发布

阅读量243

点赞数 1

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_45457760/article/details/115416870

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用HTML5的canvas元素创建一个交互式的画板应用，包括设置线条颜色、画布背景色、线条粗细以及实现清除画布的功能。用户可以通过颜色选择器和线条粗细选择器自定义画笔样式，同时可以通过点击按钮清除画布上的内容。

摘要由CSDN通过智能技术生成

用canvas画布制作画板，包括修改线条颜色，画布颜色，线条粗细，清除画布等功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blue elephant</title>
</head>
<body>
    <div style="display: block;">
        <!-- 颜色选择器 -->
        选择线条颜色
        <input type="color" id="color">
        选择画布颜色
        <input type="color" id="bgcolor" value="#ffffff">
        <!-- 线条粗细选择 -->
        <select name="" id="linewidth">
            <option value="5">请选择线条粗细</option>
            <option value="2">2px</option>
            <option value="5">5px</option>
            <option value="8">8px</option>
            <option value="12">12px</option>
            <option value="15">15px</option>
        </select>
        <!-- 清除画布按钮 -->
        <input type="button" value="清除画布" id="clear">
    </div>
    <canvas id="can" width="500" height="500" style="background-color: #ffffff;display: block;border:black solid 1px">
        该浏览器不支持canvas
    </canvas>
    <script>
        // 获取页面元素
        var canvas = document.getElementById("can");
        var can = canvas.getContext("2d");
        var color = document.getElementById("color");
        var bgcolor = document.getElementById("bgcolor");
        var liwidth = document.getElementById("linewidth");
        var clear = document.getElementById("clear");
        var isdraw = false
        // 鼠标按下
        canvas.onmousedown = function(event){
            isdraw = true
            // 设置线条颜色
            can.strokeStyle = color.value
            // 设置线条粗细
            can.lineWidth  = liwidth.value
            can.beginPath()
            // 将画笔移动到鼠标所在位置
            can.moveTo(event.offsetX,event.offsetY)
        }
        // 鼠标移动
        canvas.onmousemove = function(event){
            // 判断鼠标是否在按下状态
            if(isdraw){
                // 设置线条终点
                can.lineTo(event.offsetX,event.offsetY)
                // 画线条
                can.stroke()
            }
        }
        // 松开鼠标
        onmouseup = function(){
            isdraw = false
        }
        // 保证鼠标未松开时回到画布能继续操作
        // 鼠标移出画布
        canvas.onmouseout = function(){
            // 鼠标仍然在按下状态
            if(isdraw == true){
                // 当鼠标移动到画布上面
                canvas.onmouseover = function(event){
                    // 将画笔移动到鼠标进入的位置
                    can.moveTo(event.offsetX,event.offsetY)
                }
            }
        }
        // 清除画布
        clear.onclick = function(){
            can.clearRect(0,0,canvas.width,canvas.height)
        }
        // 设置画布背景
        bgcolor.onchange = function(){
            canvas.style.backgroundColor = bgcolor.value
        }
    </script>

</body>
</html>

打八阿哥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas 画板

用canvas画布制作画板，包括修改线条颜色，画布颜色，线条粗细，清除画布等功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
复制链接

扫一扫

专栏目录