canvas绘图的强大功能，让人前仆后继的去研究它。代码全部加起来不足百行。还用到了h5中的<input type="color"/>和<input type="range"/>

使得页面更加简洁。

本文只用了鼠标的三个事件 onmousedown onmousemove onmouseup就轻松实现了网页画板的制作。

上代码：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         #canvas{

             border: 1px solid #333;

             display: block;

             margin:20px auto;

         }

         #color{

             width:100px;

             height:32px;

             position:absolute;

             right:115px;

             top:200px;

         }

             #range{

             width:100px;

             height:32px;

             position:absolute;

             right:115px;

             top:125px;

         }

         #demo{

             background:black;

             width:100px;

             height:5px;

             position:absolute;

             right:115px;

             top:100px;

         }

     </style>

 </head>

 <body background-color="rgba(0,0,0,0.5)">

 <div class="box">

     <h3 align="center">CANVAS制作简单在线画板</h3>

     <canvas id="canvas" width="800" height="600"></canvas>

     <input type="color" id="color"/>

     <div id="demo"></div>

     <input type="range" id="range" min="1" max="10"/>

 </div>

 <script type="text/javascript">

     var canvas=document.getElementById("canvas");

     var cxt=canvas.getContext("2d");

     var color=document.getElementById("color");

     var size=document.getElementById("range");

     var demo=document.getElementById("demo");

     //根据size的变化来使得size上面的线条演示画笔粗细。

     size.onchange=function(){

         demo.style.height=size.value+"px";

     }

     //使得color的颜色与演示线条的颜色一致

     color.onchange=function(){

         demo.style.background=color.value;

     }

     var flag=false;

     //鼠标按下

     canvas.onmousedown= function (e) {

         var mouseX= e.pageX-this.offsetLeft;

         var mouseY= e.pageY-this.offsetTop;

         flag=true;

         cxt.beginPath();

         cxt.lineWidth=size.value;

         cxt.strokeStyle=color.value;

         cxt.moveTo(mouseX,mouseY);

     };

     //鼠标移动

     canvas.onmousemove= function (e) {

         var mouseX= e.pageX-this.offsetLeft;

         var mouseY= e.pageY-this.offsetTop;

         if(flag){

             cxt.lineTo(mouseX,mouseY);

             cxt.stroke();

         }

     }

     //鼠标松开

     canvas.onmouseup= function (e) {

         flag=false;

     }

 </script>

 </body>

 </html>

大家做成后的木模样

使用canvas制作在线画板的更多相关文章

  1. html --- canvas --- javascript --- 在线画板

    canvas功能十分强大,制作一个简易画板易如反掌,主要涉及canvas的画线能力,javascript鼠标点击事件 如有问题请参考:http://www.html5party.com/857.htm ...

  2. H5中canvas标签制作在线画板

    1.介绍 左键点击下移动开始画图.放开鼠标不在画图. 2.重要使用理论 query的使用: 鼠标的按下mousedown 鼠标的移动mousemove 鼠标的放开 mouseup 3.程序 <! ...

  3. canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  4. 使用canvas制作一个移动端画板

    概述 使用canvas做一个画板,代码里涵盖了一些canvas绘图的基本思想,各种工具的类也可以分别提出来用 详细 代码下载:http://www.demodashi.com/demo/10503.h ...

  5. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  6. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  7. 小强的HTML5移动开发之路（10）——在线画板

    来自:http://blog.csdn.net/dawanganban/article/details/18094557 在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可 ...

  8. Canvas制作的下雨动画

    简介 在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...

  9. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

随机推荐

  1. mysql 查看死锁和去除死锁

    1.查询是否锁表show OPEN TABLES where In_use > 0; 2.查询进程 show processlist 3.  查询到相对应的进程,然后 kill id 验证(ki ...

  2. Tomcat工作原理详解

    一.Tomcat背景 自从JSP发布之后,推出了各式各样的JSP引擎.Apache Group在完成GNUJSP1.0的开发以后,开始考虑在SUN的JSWDK基础上开发一个可以直接提供Web服务的JS ...

  3. LightOJ 1220 Mysterious Bacteria 水题

    暴力就行了,找出素因子,正的最多是30,然后负的最多是31(这一点wa了一次) #include <cstdio> #include <iostream> #include & ...

  4. Monkey的简单自动化

    手机测试都逃避不了Monkey,但每次都是手动跑Monkey,自己导出包来,一条条的手动输入命令. 现在轮到我去执行这些任务,觉得很是繁琐,于是写了这个脚本,自动读取导出的包名,一键回车搞定. 代码如 ...

  5. 添加iis的wolf、wolf2、json支持

    1.打开“mime类型”,添加: 如下“文件扩展名”和“mime类型”: .woff            application/x-font-woff .woff2          applic ...

  6. 【转】傅里叶变换 拉普拉斯变 z变换 DFT DCT意义

    傅里叶变换在物理学.数论.组合数学.信号处理.概率论.统计学.密码学.声学.光学.海洋学.结构动力学等领域都有着广泛的应用(例如在信号处理中,傅里叶变换的典型用途是将信号分解成幅值分量和频率分量). ...

  7. Spark + Mesos 注意事项

    在使用spark-submit的过程中,需要注意 spark-defaults.conf Spark-defaults.conf的作用范围要搞清楚,编辑driver所在机器上的spark-defaul ...

  8. Clean Code–Chapter 7 Error Handling

    Error handling is important, but if it obscures logic, it's wrong. Use Exceptions Rather Than Return ...

  9. 【解决】HDFS HA无法自动切换问题

    [解决]HDFS HA无法自动切换问题 原因: 最早设置为root互相登录,可是zkfc服务是hdfs账号运行的,没有权限访问到root的id_rsa文件.更改为hdfs账号免密钥登录恢复正常.   ...

  10. HTML几类标签的应用总结

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...