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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
php微信开发之关注事件
2018/06/14 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python中列表的一些基本操作知识汇总
2015/05/20 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python中bisect的使用方法
2019/12/31 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
空字符串(“”)和null的区别
2012/11/13 面试题
周年庆典邀请函范文
2014/01/23 职场文书
公司门卫工作职责
2014/06/28 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技