js+canvas实现画板功能


Posted in Javascript onSeptember 13, 2020

本文实例为大家分享了js+canvas实现画板功能的具体代码,供大家参考,具体内容如下

1.实现了画图,改变画笔粗细,改变画笔颜色,清屏功能

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>画板</title>
 <link rel="shortcut icon" type="image/x-icon" href="img/an.ico" />
 <link rel="stylesheet" type="text/css" href="css/drow.css" />
 </head>
 <body>
 <canvas id="mycanvas" width="1100px" height="660px"></canvas>
 <div class="tool">
  画笔颜色:<input type="color" name="color1" id="color1"/><br />
  画笔粗细:<input type="range" name="range1" id="range1"min="1" max="20"/><br />
  <button class="btn">清屏</button>
 </div>
 </body>
 <script src="js/drow.js" type="text/javascript" charset="utf-8"></script>
</html>
*{
 margin: 0;
 padding: 0;
 text-align: left;
 -moz-user-select: none;
 -ms-user-select: none;
 -webkit-user-select: none;
}
#mycanvas{
 border: 2px solid deepskyblue;
}
.tool{
 width: 260px;
 height: 100%;
 position: fixed;
 right: 0;
 top: 0;
 background-color: #CCCCCC;
}
//获取对象
var mycanvas = document.getElementById("mycanvas");
var color1 = document.getElementById("color1");
var range1 = document.getElementById("range1");
var btn = document.getElementsByClassName("btn")[0];
var contxt = mycanvas.getContext("2d");
btn.onclick=function () {
 contxt.clearRect(0,0,1200,660);
}
var flag = false;
var x = 0,
 y = 0;
// 鼠标点下事件
mycanvas.onmousedown = function(event) {
 flag = true;
 // 获取鼠标点下的开始位置
 var x = event.clientX - mycanvas.offsetLeft;
 var y = event.clientY - mycanvas.offsetTop;
 contxt.beginPath(); // 开始新建路径
 contxt.strokeStyle = color1.value; // 获得颜色赋值给画笔
 contxt.lineCap="round";
 contxt.lineWidth = range1.value; // 获得画笔宽度赋值给画笔
 contxt.moveTo(x, y); // 开始位置
 }
// 鼠标移动事件
mycanvas.onmousemove = function(event) {
 // 获取鼠标在移动的位置
 var mX = event.clientX - mycanvas.offsetLeft;
 var mY = event.clientY - mycanvas.offsetTop;
 if (flag) {
  contxt.lineTo(mX, mY); // 移动途中和结束位置
  contxt.stroke(); // 结束渲染画布
 }
 }
// 鼠标松开事件
mycanvas.onmouseup = function() {
 flag = false;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
document.createElement()用法
Mar 13 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
Node学习记录之cluster模块
May 31 Javascript
详解vue express启动数据服务
Jul 05 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
jQuery实现简单全选框
Sep 13 #jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
js+audio实现音乐播放器
Sep 13 #Javascript
js+canvas实现刮刮奖功能
Sep 13 #Javascript
js+css3实现简单时钟特效
Sep 13 #Javascript
jquery实现简易验证插件封装
Sep 13 #jQuery
You might like
PHP入门速成教程
2007/03/19 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
使用jquery清空、复位整个输入域
2015/04/02 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
Python应用领域和就业形势分析总结
2019/05/14 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
会计毕业生自荐信
2013/11/21 职场文书
项目建议书范文
2014/05/12 职场文书
自荐信怎么写
2015/03/04 职场文书
小学生读书笔记范文
2015/06/30 职场文书
中秋节祝酒词
2015/08/12 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
vue elementUI批量上传文件
2022/04/26 Vue.js
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android