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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
前端性能优化建议
Sep 17 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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
西德产收音机
2021/03/01 无线电
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
Vue仿今日头条实例详解
2018/02/06 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
pandas分批读取大数据集教程
2020/06/06 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
Python里面如何拷贝一个对象
2014/02/17 面试题
技术总监岗位职责
2013/12/05 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
高三自我评价
2014/02/01 职场文书
大学生简短的自我评价
2014/09/12 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
投资意向协议书
2015/01/29 职场文书
水电工程师岗位职责
2015/02/13 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
React实现动效弹窗组件
2021/06/21 Javascript
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python