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. Azure Backup 简介

    ViswanathTata云 +Enterprise 项目经理 AzureBackup是 Azure恢复服务的一部分,在安全高效的环境中对上传到 Azure的数据提供简单可靠的管理和保护.Azur ...

  2. android 欢迎界面的淡入效果

    package com.example.spinnertest; import android.app.Activity; import android.content.Intent; import ...

  3. 【转】NI语法 JNI参考 JNI函数大全

    原文网址:http://blog.sina.com.cn/s/blog_5de73d0b0101chk1.html 一.对照表 Java类型    本地类型         描述boolean     ...

  4. lightoj 1013

    思路:动态规划.设dp[i][j][k]表示用第一个串的前i隔字符和第二个串的前k隔字符组成长度为i的串的个数,那么:若s1[j+1] == s2[k+1] dp[i+1][j+1][k+1] += ...

  5. Ubuntu 14.04 SSH + 远程登录xrdp

    1. 安装ssh 打开"终端窗口",输入"sudo apt-get install openssh-server"-->回车-->输入"y ...

  6. ARM--存储管理器

    初入领悟: 1. bank.L-bank的概念 2. s3c2440内部管理SDRAM寄存器配置 Frist part:原理分析 S3c2440为32位微处理器,其可访问空间为4G:但其中提供1G外设 ...

  7. wuzhicms后台菜单的添加

    红色部分都是从菜单管理处添加而来.只有少数是自定义的. 开发一个模块,首先就是菜单的管理.而,不需要的功能也可以在在菜单管理处隐藏或删除. 添加菜单:

  8. 洛谷P1294 高手去散步

    洛谷1294 高手去散步 题目背景 高手最近谈恋爱了.不过是单相思.“即使是单相思,也是完整的爱情”,高手从未放弃对它的追求.今天,这个阳光明媚的早晨,太阳从西边缓缓升起.于是它找到高手,希望在晨读开 ...

  9. linux下mysql的表名问题

    最近从win转移到了linux,在本机跑好的程序但在linux下一个SQL语句报了错误,发现是表名未找到,错误原因是在linux下mysql的表名是严格区分大小写的.. MYSQL在LINUX下数据库 ...

  10. void,extern,sizeof

    高手潜规则:禁用goto 程序质量与goto出现次数成反比 void指针的意义 1.C语言规定只有相同类型的指针才可以相互赋值 2.void*指针作为坐值用于"接收"任意类型的指针 ...