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 相关文章推荐
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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
用Socket发送电子邮件
2006/10/09 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP new static 和 new self详解
2017/02/19 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python中bytes和str类型的区别
2019/10/21 Python
详解Django配置JWT认证方式
2020/05/09 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
投标担保书范文
2014/04/02 职场文书
欢迎词范文
2015/01/27 职场文书
信息简报范文
2015/07/21 职场文书