js+css实现简单的canvas画板效果代码-html代码-BFW代码库

js+css实现简单的canvas画板效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现简单的canvas画板效果代码，可设置画笔颜色和笔触大小。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
        <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" />
<style>
    * {
        padding: 0;
        margin: 0;
}
body {
        display: flex;
        justify-content: center;
}
.options {
        display: flex;
        align-items: center;
        margin-top: 20px;
}
.options input {
        /* 清除input自带的轮廓 */
        outline: 0;
        margin-left: 20px;
}
.options button {
        /* 简单修饰一下按钮 */
        /* 同样清除轮廓 */
        outline: 0;
        /* 把边框也去掉 */
        border: 0;
        padding: 10px 20px;
        /* 加个圆角 */
        border-radius: 3px;
        color: #fff;
        background-color: #0d53ff;
        /* 鼠标移入变小手 */
        cursor: pointer;
}
/* 给画布一个边框 */
canvas {
        margin-top: 20px;
        border: 1px solid #000;
}

</style>
        </head>
        <body>
                <!-- 本期视频不写样式 只为实现最后的画图效果 -->
                <div class="container">
                        <div class="options">
                                <label>画笔颜色</label>
                                <!-- value值可以设置默认的颜色 -->
                                <input type="color" value="#7788ff" id="color" />
                        </div>
                        <div class="options">
                                <label>画笔粗细</label>
                                <!-- value同样设置默认的值 -->
                                <!-- min为最小取值 -->
                                <!-- max为最大取值 -->
                                <input type="range" value="5" min="1" max="50" id="range" />
                        </div>
                        <div class="options">
                                <button id="clear">清空画布</button>
                        </div>
                        <canvas width="1000" height="500"></canvas>
                </div>
                <script>
                   .........完整代码请登录后点击上方下载按钮下载查看