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. Linux内核与根文件系统的关系

    开篇题外话:对于Linux初学者来说,这是一个很纠结的问题,但这也是一个很关键的问题!         一语破天机: “尽管内核是 Linux 的核心,但文件却是用户与操作系统交互所采用的主要工具.这 ...

  2. Centos 6.5中使用yum安装jdk

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

  3. udhcpc和udhcpd移植

    实现DHCP自动获取IP地址 前提:系统已经实现DNS(即使用ping www.baidu.com测试时能ping通). 1．  在内核中添加以下选项: Networking  ---> [*] ...

  4. RESTLET开发实例（三）基于spring的REST服务

    http://www.lifeba.org/arch/restlet_spring_3.html 前面两篇文章,我们介绍了基于JAX-RS的REST服务以及Application的Rest服务.这里将 ...

  5. C# 线程更新UI

    最方便的用法: private void ViewMsg(string msg)        { /* control.Invoke(new SetControlTextDelegate((ct,  ...

  6. [转]ASP.NET MVC 入门7、Hellper与数据的提交与绑定

    ASP.NET MVC提供了很多Hellper的方法,Hellper就是一些生成HTML代码的方法,方便我们书写HTML代码(有一部分的朋友更喜欢直接写HTML代码).我们也可以利用.NET 3.5的 ...

  7. Frame 处理

    # -*- coding:utf-8 -*- """ 通过 id 或 name 识别处理 fram 框架 """ from selenium ...

  8. OpenGL绘制自由落体小球

    OpenGL绘制自由落体小球 一.    程序运行的软硬件环境 本次设计在window10系统下进行,运用C++进行编写,在CodeBlocks环境下使用OpenGL进行设计. 所需环境配置分为2部分 ...

  9. UI之UItableView重用机制的性能问题

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  10. 【JS】Intermediate3:AJAX

    1.load new content into a page without a full reload XML HTTP Request (XHR) To retrieve new content ...