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教程(6):创建网站多列
Apr 02 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 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
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python实现批量监控网站
2016/09/09 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
工作表现评语
2014/01/19 职场文书
小学老师寄语大全
2014/04/04 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2016年校长新年寄语
2015/08/17 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android