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 相关文章推荐
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
javascript搜索框效果实现方法
May 14 Javascript
javascript中caller和callee详解
Aug 10 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
微信小程序block的使用教程
Apr 01 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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 实例化类的一点摘记
2008/03/23 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
js实现验证码功能
2020/07/24 Javascript
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
python学习之编写查询ip程序
2016/02/27 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python多线程并发及测试框架案例
2019/10/15 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Python flask框架端口失效解决方案
2020/06/04 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
技术人员面试提纲
2013/11/28 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
小学一年级评语大全
2014/04/22 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
停车位租赁协议书
2014/09/24 职场文书
升职自荐信范文
2015/03/27 职场文书
经理岗位职责范本
2015/04/15 职场文书
2016年少先队活动总结
2016/04/06 职场文书
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技