1.介绍

　　左键点击下移动开始画图。放开鼠标不在画图。

2.重要使用理论

query的使用：

　　鼠标的按下mousedown

　　鼠标的移动mousemove

　　鼠标的放开 mouseup

3.程序

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8" />

     <title>draw board</title>

     <script src="D:\jquery\jquery-1.12.4.min.js"></script>

     <style type="text/css">

         #board{border:2px solid:#f00;}

     </style>

 </head>

 <body>

     <canvas id="board" width="300" height="300"></canvas>

     <br/>

     <script type="text/javascript">

         var canvas=document.getElementById('board');

         var board=canvas.getContext("2d");

             board.lineWidth=5;

             board.strokeStyle="blue";

         var paint=false;

         //mousedown

         $("#board").mousedown(function(e){

             var mouseX=e.pageX-this.offsetLeft;

             var mouseY=e.pageY-this.offsetTop;

             paint=true;    //true

             board.moveTo(mouseX,mouseY);

         });

         //mouseup

         $("#board").mouseup(function(e){

             paint=false;

         });

         //mousemove

         $("#board").mousemove(function(e){

             var mouseX=e.pageX-this.offsetLeft;

             var mouseY=e.pageY-this.offsetTop;

             if(paint){

                 board.lineTo(mouseX,mouseY);

                 board.stroke();

             }

         });

     </script>

     <h2>哈哈哈哈</h2>

 </body>

 </html>

4.运行结果图

　　

H5中canvas标签制作在线画板的更多相关文章

  1. 使用canvas制作在线画板

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

  2. HTML5的canvas标签制作黑客帝国里的简单画面

    1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...

  3. H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

    一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...

  4. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  5. html --- canvas --- javascript --- 在线画板

    canvas功能十分强大,制作一个简易画板易如反掌,主要涉及canvas的画线能力,javascript鼠标点击事件 如有问题请参考:http://www.html5party.com/857.htm ...

  6. 从web图片裁剪出发：了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

  7. 关于H5中的Canvas API的探索

    Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...

  8. html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  9. 04. H5标签有哪些？行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？你工作中常用标签有什么？

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

随机推荐

  1. 一台机子同时启动两个相同版本的tomcat

    其实我的机子之前是可以同时启动两个tomcat的,但是是两个不同版本的tomcat,一个是6.0,一个是7.0,我的环境变量都没有设置,所以我对解压过的tomcat唯一改动的就是在catalina.b ...

  2. 【bzoj1758】 Wc2010—重建计划

    http://www.lydsy.com/JudgeOnline/problem.php?id=1758 (题目链接) 题意 给出一棵树,每条边有边权,问选出一条长度为$[L,U]$的路径,使得路径上 ...

  3. Linux上SSH登录远程服务器免密码

    在本地的客户端SSH到远程服务端时,每次都要输入用户名和密码,如果不想每次都输入密码则可以使用以下操作. 首先在本地的客户端输入 ssh-keygen [keysystem@localhost ~]$ ...

  4. zabbix agent安装（三）

    转载于https://mp.weixin.qq.com/s/33ab-JLoRfMkeI4aZDciJQ 前一篇文章介绍了zabbix server安装,这篇文章主要讲解zabbix agent安装以 ...

  5. webpack提取库

    有时候我们不想bundle.js过于大,想把一些库独立成文件单独拿出来 module.exports = { entry: { // bundle是我们要打包的项目文件的导出名字, app是入口js文 ...

  6. windows命令快捷启动应用-----window小技巧

    前言 装逼的道路总是这么漫长 而又充满激情.对于崇尚技术的男儿,了解计算机的世界,是我一辈子都是在追寻的.看着各种黑客电影,有那个大牛还需要鼠标的辅助,想想都是那么的令人兴奋 为了有那么一天的到来,我 ...

  7. Spring Cloud (十三) Zuul：静态路由、静态过滤器与动态路由的实现

    前言 本文起笔于2018-06-26周二,接了一个这周要完成的开发任务,需要先等其他人的接口,可能更新的会慢一些,还望大家见谅.这篇博客我们主要讲Spring Cloud Zuul.项目地址:我的gi ...

  8. 【IT界的厨子】家常版本的黄焖鸡

    前言: 周末在家,闲来无事, 使用简单的食材,满足家人的味蕾,做出秒杀馆子的黄焖鸡(我是这么认为的).虽然没有厨师的手艺,但为家人做饭,也是一种幸福. 用料: 主料:老母鸡一只,要求店老板剁好 配料: ...

  9. 洛谷 P4838 P哥破解密码 题解

    矩阵乘法 + 快速幂优化递推: 看到这个题目我们不难想到递推,题干中说3个连续的A出现在序列中是不合法的,所以可以分为三种情况: (1):序列前只有一个A,如:BA,BBA,BABA. (2):序列前 ...

  10. nginx配置thinkphp5

    [root@z_centos nginx]# /usr/local/nginx/sbin/nginx -hnginx version: nginx/1.13.9thinkphp 5.0.18 [roo ...