Javascript HTML5 Canvas实现的一个画板


Posted in Javascript onApril 12, 2020

本文实例为大家分享了HTML5 Canvas实现的一个画板代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>DEMO6:自定义画板</title>
</head>
<body>
<canvas id="canvas" width="600" height="300">
 浏览器不支持canvas <!-- 如果不支持会显示这段文字 -->
</canvas>
<br/>
<button style="width:80px;background-color:yellow;" onclick='linecolor="yellow";'>YELLOW</button>
<button style="width:80px ;background-color:red;" onclick='linecolor="red";'>RED</button>
<button style="width:80px ;background-color:blue;" onclick='linecolor="blue";'>BLUE</button>
<button style="width:80px ;background-color:green;" onclick='linecolor="green";'>GREEN</button>
<button style="width:80px ;background-color:white;" onclick='linecolor="white";'>WHITE</button>
<button style="width:80px ;background-color:black;" onclick='linecolor="black";'>BLACK</button>
<br/>
 
<button style="width: 80px;background-color: white;" onclick="linw=4;">4PX</button>
<button style="width: 80px;background-color: white;" onclick="linw=8;">8PX</button>
<button style="width: 80px;background-color: white;" onclick="linw=16;">16PX</button>
<br/>
 
<button style="width: 80px;background-color: white;" onclick="copyimage();">EXPORT</button>
 
<br/>
<img src="" id="image_png" width="600px" height="300px">
<br/>
 
<script type="text/javascript">
 var canvas = document.getElementById('canvas'); //获取标签
 var ctx = canvas.getContext("2d"); 
 
 var fillStyle = "black";
 ctx.fillRect(0,0,600,300);
 var onoff = false; //按下标记
 var oldx = -10;
 var oldy = -10;
 //设置颜色
 var linecolor = "white";
 var linw = 4;
 canvas.addEventListener("mousemove",draw,true); //鼠标移动事件
 canvas.addEventListener("mousedown",down,false); //鼠标按下事件
 canvas.addEventListener("mouseup",up,false); //鼠标弹起事件
 function down(event){
  onoff = true;
  oldx = event.pageX - 10;
  oldy = event.pageY - 10;
 }
 function up(){
  onoff = false;
 }
 function draw(event){
  if (onoff==true) {
   var newx = event.pageX - 10;
   var newy = event.pageY - 10
   ctx.beginPath();
   ctx.moveTo(oldx,oldy);
   ctx.lineTo(newx,newy);
   ctx.strokeStyle = linecolor;
   ctx.lineWidth = linw;
   ctx.lineCap = "round";
   ctx.stroke();
 
   oldx = newx;
   oldy = newy;
  }
 }
 function copyimage(event)
 {
  var img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数
  document.getElementById("image_png").src = img_png_src;
 }
  
 </script> 
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
vue中使用rem布局代码详解
Oct 30 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
bootstrap3 兼容IE8浏览器!
May 02 #Javascript
javascript实现列表切换效果
May 02 #Javascript
基于javascript编写简单日历
May 02 #Javascript
Bootstrap媒体对象的实现
May 01 #Javascript
Bootstrap进度条组件知识详解
May 01 #Javascript
BootStrap glyphicons 字体图标实现方法
May 01 #Javascript
JS实现左右无缝轮播图代码
May 01 #Javascript
You might like
拼音码表的生成
2006/10/09 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
python数据结构之列表和元组的详解
2017/09/23 Python
python的socket编程入门
2018/01/29 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python逆序打印各位数字的方法
2018/06/25 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
2016党员干部政治学习心得体会
2016/01/23 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python