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

使得页面更加简洁。

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

上代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style type="text/css">
  7.          #canvas{
  8.              border: 1px solid #333;
  9.              display: block;
  10.              margin:20px auto;
  11.          }
  12.          #color{
  13.              width:100px;
  14.              height:32px;
  15.              position:absolute;
  16.              right:115px;
  17.              top:200px;
  18.          }
  19.              #range{
  20.              width:100px;
  21.              height:32px;
  22.              position:absolute;
  23.              right:115px;
  24.              top:125px;
  25.          }
  26.          #demo{
  27.              background:black;
  28.              width:100px;
  29.              height:5px;
  30.              position:absolute;
  31.              right:115px;
  32.              top:100px;
  33.          }
  34.      </style>
  35.  </head>
  36.  <body background-color="rgba(0,0,0,0.5)">
  37.  <div class="box">
  38.      <h3 align="center">CANVAS制作简单在线画板</h3>
  39.      <canvas id="canvas" width="800" height="600"></canvas>
  40.      <input type="color" id="color"/>
  41.      <div id="demo"></div>
  42.      <input type="range" id="range" min="1" max="10"/>
  43.  </div>
  44.  <script type="text/javascript">
  45.      var canvas=document.getElementById("canvas");
  46.      var cxt=canvas.getContext("2d");
  47.      var color=document.getElementById("color");
  48.      var size=document.getElementById("range");
  49.      var demo=document.getElementById("demo");
  50.      //根据size的变化来使得size上面的线条演示画笔粗细。
  51.      size.onchange=function(){
  52.          demo.style.height=size.value+"px";
  53.      }
  54.      //使得color的颜色与演示线条的颜色一致
  55.      color.onchange=function(){
  56.          demo.style.background=color.value;
  57.      }
  58.      var flag=false;
  59.      //鼠标按下
  60.      canvas.onmousedown= function (e) {
  61.          var mouseX= e.pageX-this.offsetLeft;
  62.          var mouseY= e.pageY-this.offsetTop;
  63.          flag=true;
  64.          cxt.beginPath();
  65.          cxt.lineWidth=size.value;
  66.          cxt.strokeStyle=color.value;
  67.          cxt.moveTo(mouseX,mouseY);
  68.      };
  69.      //鼠标移动
  70.      canvas.onmousemove= function (e) {
  71.          var mouseX= e.pageX-this.offsetLeft;
  72.          var mouseY= e.pageY-this.offsetTop;
  73.          if(flag){
  74.  
  75.              cxt.lineTo(mouseX,mouseY);
  76.              cxt.stroke();
  77.          }
  78.      }
  79.      //鼠标松开
  80.      canvas.onmouseup= function (e) {
  81.          flag=false;
  82.      }
  83.  </script>
  84.  </body>
  85.  </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. ☀【Node】处理文件上传

    Node入门 √http://www.nodebeginner.org/index-zh-cn.html Node.js中所用的fs.renameSync出错:Error: EXDEV, cross- ...

  2. asp.net mvc ChildActionOnly 和ActionName的用法

    ChildActionOnly的目的主要就是让这个Action不通过直接在地址栏输入地址来访问,而是需要通过RenderAction来调用它. <a href="javascript: ...

  3. [POJ2234]Matches Game

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9297   Accepted: 5365 Description Here ...

  4. cygwin设置中文

    cygwin\home\username\.bashrc # 让ls和dir命令显示中文和颜色 alias ls='ls --show-control-chars --color' alias dir ...

  5. Java读取文件夹大小的6种方法及代码

    (一)单线程递归方式 package com.taobao.test; import java.io.File; public class TotalFileSizeSequential { publ ...

  6. post方法

    CookieContainer cookie = new CookieContainer(); private string HttpPost(string Url, string postDataS ...

  7. HBase 学习笔记---守护进程及内存调优

    1.HMaster           HMaster的任务前面已经说过了,两个大方向:一.管理Hbase Table的 DDL操作 二.region的分配工作,任务不是很艰巨,但是如果采用默认自动s ...

  8. C#Winform窗口特效源码(1)

    本文基于.Net开发,使用C#作为开发语言,分别包含以下效果: 移动无边框窗口.窗口移动限制(限制在屏幕内).桌面贴边自动隐藏(仿QQ隐藏窗口) 1.移动无边框窗口 采用了消息的方式,可以实现通过窗口 ...

  9. python学习(3)

    Python学习(3)切片(Slice):根据索引范围取出字符串里面的内容,比如: l=range(100)   l[:8] [0, 1, 2, 3, 4, 5, 6, 7]              ...

  10. Dublin Core

    DC(Dublin Core) 是数字图书馆中使用的一组简单的包括15个“核心元素”的元数据元素集合,主要用于描述数字对象.馆藏管理和元数据交换. 这15项元数据不仅适用于电子文献目录,也适用于各类电 ...