写字板事例：

      写字板分析：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. 【Go入门教程4】变量（var），常量（const），内置基础类型（Boolean、数值 byte,int,rune、字符串、错误类型），分组，iota枚举，array（数值），slice（切片），map（字典），make/new操作，零值

    这小节我们将要介绍如何定义变量.常量.Go 内置类型以及 Go 程序设计中的一些技巧. 定义变量 Go 语言里面定义变量有多种方式. 使用 var 关键字是 Go 最基本的定义变量方式,与 C 语言不 ...

  2. Linux新内核：提升系统性能 --Linux运维的博客

    http://blog.csdn.net/linuxnews/article/details/52864182

  3. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  4. 浅用block 转

    block是一门有用的大后期学问.现在我只是列出一点基本用法. 1.快速枚举(Enumeration) 通常是和NSArray, NSDictionary, NSSet, NSIndexSet放在一起 ...

  5. Android支付接入（7）：Google In-app-Billing

    今天跟大家一起看下Google的in-app Billing V3支付.    如果没有GooglePlay此处附上安装Google Play的一键安装器的链接(需要Root权限):http://ww ...

  6. python文本 字符与字符值转换

    python文本 字符与字符值转换 场景: 将字符转换成ascii或者unicode编码 在转换过程中,注意使用ord和chr方法 >>> print(ord('a'))    97 ...

  7. CLR查找和加载程序集 z

    C#开发者在开发WinForm程序.Asp.Net Web(MVC)程序等,不可避免的在项目中引用许多第三方的DLL程序集, 编译后引用的dll都放在根目录下.以我个人作品 AutoProject S ...

  8. GeoHash核心原理解析及java代码实现（转）

    原文链接:http://blog.jobbole.com/80633/ 引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西.某一天机机到北海公园游玩,肚肚饿了,于是乎 ...

  9. Bootstrap学习js插件篇之标签页

    简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...

  10. OpenGL使用libPng读取png图片

    #include<stdarg.h> #include<png.h> #include<glut.h> #include<math.h> #includ ...