JavaScript+Canvas实现自定义画板的示例代码


Posted in HTML / CSS onMay 13, 2019

最近研究了HTML5一些新的元素属性,发现确实好用,特别是里面的Canvas这个新的标签元素。官方介绍:Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。以下使用JavaScript结合Canvas实现一个画板功能

效果演示图:

JavaScript+Canvas实现自定义画板的示例代码

代码部分(直接复制便可使用)

<!DOCTYPE HTML>
<html>
<head>  
<meta charset="utf-8" />  
<title>JavaScript+Canvas实现自定义画板</title>
</head>
<body>
<canvas id="canvas"  width="600" height="300"></canvas>
<script type="text/javascript">   
  var canvas = document.getElementById("canvas");   
  var ctx = canvas.getContext("2d");   
  //画一个黑色矩形   
  ctx.fillStyle="black";   
  ctx.fillRect(0,0,600,300);   
  //按下标记   
  var onoff = false;  
  //变量oldx跟oldy代表鼠标移动前的坐标  
  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;  
   //console.log(event.pageX+'..............000.............'+event.pageY);
  //event.pageX跟event.pageY相对于整个页面鼠标的位置 包括溢出的部分(就是滚动条)   
  }   
  function up(){     
   onoff = false;   
 }  
 function draw(event){    
  if(onoff == true){        
   var newx = event.pageX-10;        
   var newy = event.pageY-10;        
   ctx.beginPath();//beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。       
   ctx.moveTo(oldx,oldy);   //移动到点击时候的坐标,以那个坐标为原点      
   ctx.lineTo(newx,newy);   //绘制新的路径       
   ctx.strokeStyle=linecolor;       
   ctx.lineWidth=linw;       
   ctx.lineCap="round";       
   ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。    
//将新的鼠标位置赋给下一次开始绘制的起始坐标      
   oldx = newx;      
   oldy = newy;   
  };
 };
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 #HTML / CSS
基于Html5实现的语音搜索功能
May 13 #HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 #HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 #HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 #HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 #HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 #HTML / CSS
You might like
phpwind中的数据库操作类
2007/01/02 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
php分页查询的简单实现代码
2017/03/14 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
一些.net面试题
2014/10/06 面试题
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
转预备党员政审材料
2014/02/06 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
辩论赛主持词
2014/03/18 职场文书
体育运动会广播稿
2014/10/05 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
在校生证明
2015/06/17 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技