原创投稿
  1. 创想鸟首页
  2. 用户投稿

用JS和html做一个简易画板代码

程序猿 • • 用户投稿

 今天教大家做一个小程序，利用css3和h5以及js做一个好玩的简易画板，有兴趣的朋友可以动手尝试一下，代码贴在下面。大家也可以发挥自己的创造力改动一些功能。

html：
  • 颜色版：
  • 笔触：
css：*{ margin:0; padding:0;}body{ background:#000;}canvas{ background:#fff; float:left;}span{ color:#fff; font-size:80px;}#ul1{width:100px;height:600px; float:left; background:#ccc;}javascript: window.onload=function(){var oC=document.getElementById('c1');var oColor=document.getElementById('color');var oNum=document.getElementById('num');var gd=oC.getContext('2d');//画笔oNum.onchange=function(){gd.lineWidth = oNum.value;strokeFn();};oColor.onchange=function(){gd.strokeStyle = oColor.value;strokeFn();};strokeFn();function strokeFn(){gd.beginPath();oC.onmousedown=function(ev){gd.moveTo(ev.clientX,ev.clientY);oC.onmousemove=function(ev){gd.lineTo(ev.clientX,ev.clientY);gd.stroke();};oC.onmouseup=function(){oC.onmousemove=oC.onmouseup=null;};return false;};}};

相信看了这些案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！

相关阅读：

怎样不使用CSS改变鼠标悬停样式

如何用CSS做图片旋转效果

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

怎么优化HTML网页

以上就是用JS和html做一个简易画板代码的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545332.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月21日 16:54:10
下一篇 2025年12月21日 16:54:30

相关推荐

  • google浏览器怎么把网页保存为PDF_google浏览器网页保存为PDF方法 用户投稿

    google浏览器怎么把网页保存为PDF_google浏览器网页保存为PDF方法

    使用Chrome将网页保存为PDF，首先按Ctrl+P进入打印界面，选择“另存为PDF”并调整设置后保存；也可通过F12打开开发者工具，截取指定元素或完整页面截图后转为PDF；还可安装“Save as PDF”等扩展程序实现更高质量的导出。 如果您希望将当前浏览的网页完整保存以便离线查看或分享，Go…

    程序猿的头像 程序猿
    2026年9月24日
    000
  • PHP实时输出如何防止XSS攻击_PHP实时输出安全防范XSS攻击 用户投稿

    PHP实时输出如何防止XSS攻击_PHP实时输出安全防范XSS攻击

    防止XSS攻击需坚持三重防护：首先对用户输入进行严格验证与白名单过滤，使用filter_var等函数校验数据格式；其次根据输出上下文进行恰当转义——HTML正文和属性用htmlspecialchars()，JavaScript变量用json_encode()，URL参数用urlencode()；最后…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • php数据如何实现文件断点续传_php数据大文件上传解决方案 用户投稿

    php数据如何实现文件断点续传_php数据大文件上传解决方案

    断点续传通过文件分片、唯一hash标识、服务端记录上传状态实现，前端切片上传并查询已传分片，PHP后端存储分片并在完成后合并，同时提供状态接口支持续传，需注意hash一致性与临时文件清理。 大文件上传在Web开发中是个常见需求，尤其是涉及视频、备份文件或资源包时。PHP本身对文件上传有一定限制，但通…

    程序猿的头像 程序猿
    2026年9月24日
    000
  • PHP 中如何将 JSON 数组值声明为变量 用户投稿

    PHP 中如何将 JSON 数组值声明为变量

    本文介绍了如何在 PHP 中从数据库获取数据并将其编码为 JSON 格式，然后通过 AJAX 请求传递到另一个页面。重点讲解了如何在接收页面解析 JSON 数据，并将 JSON 数组中的特定值提取并赋值给变量，以便在后续的 PHP 函数中使用。 从数据库获取数据并编码为 JSON 首先，我们需要从数…

    程序猿的头像 程序猿
    2026年9月24日
    000
  • Laravel 表单多动作处理：区分同一路由下的提交操作 用户投稿

    Laravel 表单多动作处理：区分同一路由下的提交操作

    本教程将详细介绍如何在 laravel 应用中，通过一个 html 表单的多个提交按钮触发不同的后端操作，而无需为每个操作创建单独的表单或路由。核心方法是为提交按钮添加 `name` 和 `value` 属性，然后在控制器中根据这些属性的值来判断执行哪种业务逻辑，从而实现如更新用户角色和删除用户等多…

    程序猿的头像 程序猿
    2026年9月24日
    000
  • Symfony路由如何定义_Symfony框架路由定义定义方法详解 用户投稿

    Symfony路由如何定义_Symfony框架路由定义定义方法详解

    答案：Symfony中路由通过URL映射控制器，支持注解、YAML、XML和PHP数组定义方式。注解适合快速开发，YAML便于团队维护，路由可设置默认值、正则约束和HTTP方法限制，确保安全与灵活。 在Symfony框架中，路由是将URL映射到控制器的关键机制。通过定义清晰的路由规则，你可以让应用响…

    程序猿的头像 程序猿
    2026年9月24日
    400
  • Laravel 表单验证失败后保留输入值：最佳实践教程 用户投稿

    Laravel 表单验证失败后保留输入值：最佳实践教程

    本文旨在帮助 Laravel 开发者解决表单验证失败后，如何保留用户已输入数据的问题。我们将深入探讨 withInput() 方法的使用，并提供清晰的代码示例，确保即使在验证失败的情况下，用户体验也能保持流畅。通过本文的学习，你将掌握在 Laravel 中优雅地处理表单验证，并提升应用的可用性。 在…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • 动态表单输入中多答案数据处理教程 用户投稿

    动态表单输入中多答案数据处理教程

    本教程旨在解决Web开发中，如何高效处理包含动态数量答案的表单提交数据，特别是当需要更新现有问题及其关联答案时。文章将详细阐述前端表单的命名策略以及后端PHP如何解析这些动态输入，以准确获取答案内容及其对应的数据库ID，从而实现数据的精准更新，并提供最佳实践建议。 理解动态答案更新的挑战 在构建问答…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • 使用 PHP 解析 JSON 文件并在网页上显示特定数据 用户投稿

    使用 PHP 解析 JSON 文件并在网页上显示特定数据

    本文旨在帮助开发者学习如何使用 PHP 解析 JSON 文件，并提取其中的特定数据，将其以结构化的方式展示在网页上。我们将通过一个简单的示例，演示如何读取 JSON 数据，解析成 PHP 数组，并最终以 HTML 表格的形式呈现。 PHP 解析 JSON 数据 JSON (JavaScript Ob…

    程序猿的头像 程序猿
    2026年9月24日
    200
  • 如何在PHP的require语句中传递参数并有效管理变量作用域 用户投稿

    如何在PHP的require语句中传递参数并有效管理变量作用域

    本文探讨了在php中使用`require`或`include`语句时如何向被引入文件传递参数。文章详细阐述了通过直接变量作用域共享、利用`$_get`超全局变量（不推荐）以及将引入文件内容封装为函数或类（推荐最佳实践）这三种方法，并提供了相应的代码示例，旨在帮助开发者理解和选择最适合其场景的参数传递…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • PHP Web开发：高效处理动态数量问题答案的表单更新与ID获取 用户投稿

    PHP Web开发：高效处理动态数量问题答案的表单更新与ID获取

    本教程探讨在PHP Web开发中，如何高效处理具有动态数量答案的问题更新表单。针对需要同时获取答案文本值及其对应ID的场景，文章详细介绍了通过合理设计表单字段命名和利用$_POST超全局变量的键值迭代特性，实现对动态生成答案字段的准确解析和数据提取，确保更新操作的完整性。 问题背景与挑战 在开发问答…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • phpMyAdmin快速导出文件字符集配置指南 用户投稿

    phpMyAdmin快速导出文件字符集配置指南

    本文详细介绍了phpMyAdmin快速导出功能中文件字符集的默认设置及其配置方法。默认情况下，快速导出生成的文件采用UTF-8编码。用户可以通过修改phpMyAdmin的配置文件config.inc.php，利用$cfg[‘Export’][‘charset&#8…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • JavaScript 中替换 JSON 数据值的实用指南 用户投稿

    JavaScript 中替换 JSON 数据值的实用指南

    本文旨在提供一个清晰、简洁的 JavaScript 教程，讲解如何根据特定条件，利用响应数据中的值替换 JSON 数据中的指定字段。我们将通过实例代码演示如何处理包含 “All” 值的 Emp_Id 字段，并使用响应数据中的 ID 值进行替换，最终生成期望的 JSON 数据结…

    程序猿的头像 程序猿
    2026年9月24日
    200
  • Laravel Blade中条件隐藏元素的优雅实践 用户投稿

    Laravel Blade中条件隐藏元素的优雅实践

    本文探讨了在Laravel Blade模板中如何高效地实现HTML元素的条件隐藏。针对传统@if-@else语句导致代码冗余的问题，教程提出使用Blade的内联三元运算符在style属性中动态控制display: none，从而避免重复代码，提升模板的可读性和维护性。此外，还将介绍如何利用CSS类和…

    程序猿的头像 程序猿
    2026年9月24日
    200
  • VSCode主题开发：创建动态色彩主题的进阶技术解析 用户投稿

    VSCode主题开发：创建动态色彩主题的进阶技术解析

    动态主题需通过外部插件监听系统事件实现，核心是利用vscode.themeColor API响应主题切换，结合语义化作用域与Semantic Highlighting精准控制配色逻辑，实现智能自适应视觉体验。 想让VSCode主题随环境自动切换色彩？动态主题不只是换个配色那么简单。核心在于理解VSC…

    程序猿的头像 程序猿
    2026年9月23日
    400
  • PHP同页面无限次表单提交与显示：防止数据覆盖的实现技巧 用户投稿

    PHP同页面无限次表单提交与显示：防止数据覆盖的实现技巧

    本教程详细阐述了如何在php中实现同页面多次表单提交而不覆盖先前数据的方法。核心策略是利用html的数组命名输入（`name=”field[]”`）来收集多个值，并在每次页面刷新时，通过隐藏输入字段重新提交已有的数据，从而在不依赖数据库的情况下，实现“无限”次提交并显示所有历…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • VS Code自动化测试：持续集成与测试覆盖率 用户投稿

    VS Code自动化测试：持续集成与测试覆盖率

    VS Code通过插件和工具集成支持自动化测试、CI流程与覆盖率分析。①配置Jest或pytest等框架，结合Test Explorer UI插件实现测试运行与调试；②利用GitHub Actions等CI服务，在代码推送后自动执行测试，通过插件在编辑器内查看状态；③启用Coverage Gutte…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • 悟空浏览器如何使用全局媒体控制器_悟空浏览器多媒体播放控制中心使用技巧 用户投稿

    悟空浏览器如何使用全局媒体控制器_悟空浏览器多媒体播放控制中心使用技巧

    1、确保悟空浏览器通知权限开启，以激活系统媒体控制；2、检查网站是否配置Media Session API，必要时注入脚本补充元数据与控制函数；3、结合画中画与后台播放功能，维持媒体会话活跃，实现锁屏或切换应用时的持续控制。 如果您在使用悟空浏览器播放网页媒体时，希望利用系统级的媒体控制功能来管理播…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • 使用 Dompdf 一键生成大量 PDF 文件的优化方案 用户投稿

    使用 Dompdf 一键生成大量 PDF 文件的优化方案

    本文旨在解决使用 Dompdf 生成大量 PDF 文件时遇到的超时问题。通过分析常见原因，提出了从Web服务器环境迁移到命令行环境，并配合 set_time_limit(0) 函数来避免执行超时，从而高效生成多个包含大量数据的 PDF 文件。 问题分析 从提供的代码片段可以看出，程序通过循环遍历 $…

    程序猿的头像 程序猿
    2026年9月23日
    600
  • 使用正则表达式实现字符串大小写不敏感替换 用户投稿

    使用正则表达式实现字符串大小写不敏感替换

    本文将介绍如何利用正则表达式，高效、简洁地实现字符串中特定单词的大小写不敏感替换，从而将所有形式的单词统一转换为指定大小写。通过运用正则表达式的“不区分大小写”模式，可以避免为每种大小写变体编写单独的替换条件，极大提升代码的简洁性和可维护性。 在编程实践中，我们经常会遇到需要将字符串中某个单词的所有…

    程序猿的头像 程序猿
    2026年9月23日
    600

发表回复

登录后才能评论
关注微信