写字板事例：

      写字板分析：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. Mybatis最入门---代码自动生成（generatorConfig.xml配置）

    [一步是咫尺,一步即天涯] 经过前文的叙述,各位看官是不是已经被Mybatis的强大功能给折服了呢?本文我们将介绍一个能够极大提升我们开发效率的插件:即代码自动生成.这里的代码自动生成包括,与数据库一 ...

  2. MFC小程序------01 代码管理器

    1.代码入库: 2.代码查找: 3.查看全部代码: 4.程序设置: 自己学习MFC写的一个小程序,当中还有很多功能还待完好,比方数据库的导入功能还没有写,但导出功能是能够用的,查找算法也不是非常好,还 ...

  3. C# 结构体定义 转换字节数组 z

    客户端采用C++开发,服务端采用C#开发,所以双方必须保证各自定义结构体成员类型和长度一致才能保证报文解析的正确性. [StructLayoutAttribute(LayoutKind.Sequent ...

  4. python接口自动化27-urlencode编码%E6%82%A0%E6%82%A0与解码

    前言 urllib.parse 里面三个方法:urlencode,quote,unquote详解. 在做接口自动化过程中,http协议在发送url的时候,是以urlencode的编码格式传过去的,通常 ...

  5. 把NDK的工具链提取出来单独使用

    独立toolchain 把NDK压缩包解压到系统,如/mnt目录下,后在/mnt目录下建立文件夹my_ndk_toolchain,然后再/mnt目录下执行以下命令:/mnt/android-ndk-r ...

  6. [PHP] ubuntu16.04下 Phpstorm发布项目到apache

    reference to : http://blog.csdn.net/qq_23937195/article/details/72953308 在网上找的不靠谱,倒腾了大半天的,终于找到正确姿势QA ...

  7. With Visual Studio, Open Same File In Two Windows, Updates Reflected in Both

    I’ve always been frustrated in Visual Studio (all versions I can remember including latest vs2012) w ...

  8. maven依赖信息获取

    1.mvn dependency:analyze 首先是"Used declared dependencies found",指项目中使用到,但是没有显示声明的依赖,如果有的话,需 ...

  9. 如何处理wordpress首页不显示指定分类文章

    如何实现wordpress首页不显示指定分类文章,要实现这一步,首先必须找到需要屏蔽的该目录的id,那么如何查看wordpress的分类id呢?有两种方法: 通过wordpress后台查看分类的ID ...

  10. [leetcode]Binary Tree Level Order Traversal II @ Python

    原题地址:http://oj.leetcode.com/problems/binary-tree-level-order-traversal-ii/ 题意: Given a binary tree, ...