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. Centos 6.5中使用yum安装jdk

    默认会有open-jdk的安装 我们需要卸载 卸载过程: 查找rpm安装包 rpm –aq|grep java; 卸载 rpm –e –nodeps 安装包 查看目前是否通过yum进行安装jdk yu ...

  2. 理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio

    SVG元素不像HTML元素一样由CSS盒模型管理.这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观.然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义.本篇文章中我 ...

  3. java命名规范和编程技巧

    一个好的java程序首先命名要规范. 命名规范 定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,方便维护等作用 Package 的命名 Package 的名字应该都是由一个小写 ...

  4. Bootstrap基本使用[转]

    Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码).Bootstrap提供了全面的基本及组件样式并自带了13个jQuer ...

  5. 大型网站应用中MySQL的架构演变史

    没有什么东西是一成不变的,包含我们的理想和生活!MySQL作为一个免费的开源的关系型数据库,深受大家喜爱,从最初的无人问津到当下的去IOE,都体现出了MySQL举足轻重的作用.今天我们就从淘宝的发展来 ...

  6. 百度参投 Uber中国12亿美元融资已到账

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. php&mysql

    更新语句 $query='update num set num='.$counter.'where id=1';      ....................这个查询失败 $query='upd ...

  8. hdoj 1898 Sempr == The Best Problem Solver?

    Sempr == The Best Problem Solver? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/3276 ...

  9. PHP使用IP地址连接MySQL数据库

    我们通常测试的时候都是用mysql_connect("localhost","usrname","password");的方式来连接MySQ ...

  10. Mysql常见问题及优化

    本文将就以下三个问题进行展开: 1.库表设计 2.慢 SQL 问题 3.误操作.程序 bug 时怎么办 一.库表设计 1.1 引擎选择 在 mysql 5.1 中,引入了新的插件式存储引擎体系结构,允 ...