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 Backgrounds属性相关介绍
May 11 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
PHP Curl出现403错误的解决办法
2014/05/29 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Python-接口开发入门解析
2019/08/01 Python
python tkinter组件使用详解
2019/09/16 Python
Python中断多重循环的思路总结
2019/10/04 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Django密码存储策略分析
2020/01/09 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
护理中职生求职信范文
2014/02/24 职场文书
表彰会主持词
2014/03/26 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
业务员岗位职责范本
2015/04/03 职场文书
父母教会我观后感
2015/06/17 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers