写字板事例：

      写字板分析：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. UCOS移植心得(

    移植UCOS之前,你首先应该做好三件事: 1．弄懂UCOS,这是谁都知道的哦 ^_^ 2. 弄懂你想要移植到的硬件平台 3. 清楚你使用的编译器是如何处理函数的局部变量和怎么样处理函数间的参数传递 这 ...

  2. [Git] git代码统计

    copy : https://www.cnblogs.com/liyropt/archive/2012/12/31/2841053.html 命令行 查看git上的个人代码量: git log --a ...

  3. 读书笔记之：C语言深度剖析

    读书笔记之:C语言深度剖析 <C 语言深度解剖>这本书是一本“解开程序员面试笔试的秘密”的好书.作者陈正冲老师提出“以含金量勇敢挑战国内外同类书籍”,确实,这本书中的知识点都是一些在面试中 ...

  4. 计算Fisher vector和VLAD

    This short tutorial shows how to compute Fisher vector and VLAD encodings with VLFeat MATLAB interfa ...

  5. @JVM垃圾回收调优方法

    JVM调优工具 Jconsole,jProfile,VisualVM Jconsole:jdk自带,功能简单,但是可以在系统有一定负荷的情况下使用.对垃圾回收算法有很详细的跟踪. JProfiler: ...

  6. 线性判别分析(Linear Discriminant Analysis, LDA）算法分析

    原文来自:http://blog.csdn.net/xiazhaoqiang/article/details/6585537 LDA算法入门 一． LDA算法概述:       线性判别式分析(Lin ...

  7. go语言之进阶篇结构体指针类型匿名字段

    1.结构体指针类型匿名字段 示例: package main import "fmt" type Person struct { name string //名字 sex byte ...

  8. go语言基础之二维数组

    1.二维数组 示例: package main //必须有个main包 import "fmt" func main() { //有多少个[]就是多少维 //有多少个[]就用多少个 ...

  9. 你应该抓紧学习Python，它是开发Web应用最强大的语言

    Python和少数几种编程语言,如MySQL.Perl.PHP和与LAMP打包的网络结构一起的Apache,已经成为Linux的一个基本组件.即 使从它诞生开始,Python就与其他动态编程语言如Ru ...

  10. 伪元素 :Before 和 :After的学习

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...