写字板事例：

      写字板分析：1.点击鼠标開始写字（onmosedown）2.按下鼠标写字（onmousemove）3.松开鼠标，停下写字（撤销onmousemove事件）：

      代码:

<strong><!doctype html>

</strong><html>

    <head>

        <meta charset="utf-8">

        <title>Canvas</title>

        <style type="text/css">

            body {

                margin: 0px;

                padding: 0px;

            }

            #canvas {

                margin: 0px;

                padding: 0px;

                border: 1px solid #000000;

            }

        </style>

    </head>

    <body>

        <canvas id="canvas" width="400" height="400">当前浏览器不支持canvas</canvas>

        <script type="text/javascript" src="utils.js"></script>

        <script type="text/javascript" src="arrow.js"></script>

        <script type="text/javascript">

            window.onload=function(){  

                var canvas=document.getElementById("canvas");

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

                /*var mouse=utils.captureMousePosition(canvas); */ 

                 //加入mousedown监听事件。在用户鼠标按下后開始画线。并注冊mousemove事件

                canvas.addEventListener("mousedown",function(event){ 

                    context.beginPath();

                    context.moveTo(event.clientX, event.clientY);

                    //alert("-------------")

                    canvas.addEventListener("mousemove",onMouseMove,false);

                },false);  

                 //在鼠标移动时划线

                function onMouseMove(event){

                    context.lineTo(event.clientX,event.clientY);

                    context.stroke();

                }

                                //在鼠标按键松开后，注销鼠标移动事件

                canvas.addEventListener("mouseup",function(event){

                    canvas.removeEventListener("mousemove",onMouseMove,false);

                },false);

            }

        </script>

    </body>

 </html>



html5之canvas画图 1.写字板功能的更多相关文章

  1. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

  2. canvas h5制作写字板

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <script type ...

  3. html5之canvas画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  4. JS+HTML5的Canvas画图模拟太阳系运转

    查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: < ...

  5. HTML5使用canvas画图时，图片被自动放大模糊的问题

    最近在研究canvas技术,发现一个问题,就是所画图像会随着画布大小自动变换大小.原因如下 <canvas id="cxt" style="width: 500px ...

  6. canvas画布，写字板

    <!doctype html><html><head> <meta charset="utf-8"> <meta http-e ...

  7. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  8. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  9. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

随机推荐

  1. MVC文件上传06-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义控制器上传多个文件

    当需要在控制器中处理除了文件的其他表单字段,执行控制器独有的业务逻辑......等等,这时候我们可以自定义控制器. MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证 ...

  2. CentOS6.5和RedHat6.5下以rpm方式安装mysql-5.6.20

    转帖;http://blog.csdn.net/mw08091020/article/details/39234207 a.检查下linux是不是已经安装了mysql rpm -qa | grep - ...

  3. 算法：快速排序（Quick Sort）

    算法定义 目前学习是五种排序(冒泡.插入.选择.合并.快速)中,快速排序是最让我喜欢的算法(因为我想不到),其定义如下: 随机的从数组中选择一个元素,如:item. 对数组进行分区,将小于等于 ite ...

  4. selenium+python自动化82-只截某个元素的图

    前言 selenium截取全图小伙伴们都知道,曾经去面试的时候,面试官问:如何截图某个元素的图?不要全部的,只要某个元素...小编一下子傻眼了, 苦心人,天不负,终于找到解决办法了. selenium ...

  5. APP的上线和推广——线上推广渠道

    本文版权归个人所有,如需转载请注明出处http://www.cnblogs.com/PengLee/p/4637080.html 目录 应用商店 互联网开放平台 软件下载中心 媒体社交平台 刷榜推广 ...

  6. LaTeX中的数学公式

    因为想在过年之前把论文写出来(虽然现在看来似乎痴人说梦),用word写PDE的公式简直是自己找虐,就想说自己研究一下LaTex,用起来发现这东西写格式性的文档真心甩word几个陈景润啊,出来的公式不仅 ...

  7. Android制作曲线、柱状图、饼形等图表——使用AChartEngine

    之前在java开发中实现图表使用JFreeChar组件,最近有个小项目要求在Android端进行数据分析,如何实现图表呢?查了一下google提供了一个开源组件Achartengine非常好用,可实现 ...

  8. mysql 数据库远程访问设置方法

    摘自: http://www.iteye.com/topic/418151 mysql数据库远程访问设置方法 1.修改localhost更改 "mysql" 数据库里的 " ...

  9. MATLAB数据处理快速学习教程

    转自:http://blog.csdn.net/abcjennifer/article/details/7706581 本篇内容集合了MATLAB中的基本操作.数据存储与计算.数据的直线与曲线拟合与画 ...

  10. POJ2762 Going from u to v or from v to u? 强连通+缩点

    题目链接: poj2762 题意: 给出一幅单向图.问这张图是否满足   随意两点ab 都能 从a到达b 或  从b到达a 题解思路: 推断一幅图是否满足弱连通 首先想到的是将图中的 强连通分量(能互 ...