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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
Angular中$compile源码分析
Jan 28 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
three.js实现圆柱体
Dec 30 Javascript
tsconfig.json配置详解
May 17 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
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php curl_init函数用法
2014/01/31 PHP
php递归json类实例
2014/12/02 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JavaScript中的继承之类继承
2016/05/01 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
vue根据值给予不同class的实例
2018/09/29 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python排序函数的使用方法详解
2020/12/11 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
大二自我鉴定范文
2013/10/05 职场文书
房地产销售员的自我评价分享
2013/12/04 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
节水标语大全
2014/06/11 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL