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. NOI2014 起床困难综合症

    3668: [Noi2014]起床困难综合症 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 225  Solved: 153[Submit][Stat ...

  2. 对XX证券报关于物联网操作系统的几个问题的答复

    XX证券报提问了几个关于物联网和物联网操作系统的问题,个人表达了一些粗陋的观点,在这里发表出来,与行业朋友交流和探讨. 物联网行业最需要解决的问题是什么? 虽然物联网这个行业被炒得比较热,但是截至目前 ...

  3. 【转】android JNI编程 一些技巧（整理）

    原文网址:http://blog.csdn.net/linweig/article/details/5203716 本篇将介绍在JNI编程中如何传递参数和返回值. 首先要强调的是,native方法不但 ...

  4. [CODEVS1216]跳马问题

    题目描述 Description 题目 输入描述 Input Description 第一行两个正整数M,N(0<M,N≤300)分别表示行和列 第二行两个正整数,表示起点的行列坐标. 第三行两 ...

  5. 【CSS】Beginner6:Border

    1.border-style:solid实线,dashed虚线,double双线,dotted点状,groove凹槽,ridge垄状,inset,outset 2.border0-width:bord ...

  6. leecode single numer

    http://www.acmerblog.com/leetcode-single-number-ii-5394.html acm之家的讲解总是那么到位 public class Solution { ...

  7. WordPress模版结构

    一套完整的WordPress模版应至少包括如下文件: style.css : 样式表文件 index.php : 首页模板 archive.php : 文章归档/分类目录模板 404.php : 40 ...

  8. HDU2196 - Computer(树形DP)

    题目大意 给定一颗n个结点的树,编号为1~n,要求你求出每个结点能到达的最长路径 题解 用动态规划解决的~~~~把1 当成树根,这样就转换成有根树了.我们可以发现,对于每个结点的最长路,要么是从子树得 ...

  9. tool

    数据结构,堆栈基本原理; 数组,堆栈,结构体等系列,数据结构间区别联系; 在此我就不饶了,直接上大白话(我总认为干些实事,比扯淡强....),故事虚构,若有雷同,请你下方留言; ruiy讲的,所跑的托 ...

  10. Windows 2003 VPN配置步骤[转]

    一,服务器端:Windows 2003 VPN代理的配置方法如下: 1.关闭防火墙,用“管理工具”中的“服务”将“Windows Firewall/Internet Connection Sharin ...