1. <!--
    实现鼠标按下的时候，移动进行绘制，鼠标抬起结束绘图，
    用到的事件有mousedown mousemove mouseup
    用的的canvas api 有 beginPath moveTo lineTo stroke
  2.  
  3. 涉及到了内容有dom标签canvas  事件和canvas的api
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>canvas</title>
    </head>
    <body>
    <!--设置canvas画布-->
    <canvas id="canvas" width="1920" height="1080"></canvas>
    <script>
    //    加载onload事件，页面启动就进行画图
        window.onload = drawImage();
    //    画图函数
        function drawImage(){
    //        获取canvas这个dom元素
            var canvas = document.getElementById('canvas');
    //        获取上下文环境
            var ctx = canvas.getContext('2d');
    //        鼠标按下获取事件的坐标点
            canvas.onmousedown = function(e){
                var x = e.layerX;
                var y = e.layerY;
                console.log(x+"----"+y);
    //           开始画图，beginPath 实际的功能是清除缓存
                ctx.beginPath();
    //            移动到开始点
                ctx.moveTo(x,y);
    //            鼠标移动开始画图
                canvas.onmousemove= function (e1) {
                    var ex = e1.layerX;
                    var ey = e1.layerY;
                    console.log("ex"+ex+"ey"+ey);
    //                移动到的点
                    ctx.lineTo(ex,ey);
    //                告诉画笔开始画图了
                    ctx.stroke();
                };
    //            鼠标抬起时结束画图
                canvas.onmouseup=function () {
                    canvas.onmousemove = null;
                    canvas.onmouseup = null;
                };
            };
        }
    </script>
    </body>
    </html>

canvas 动态画线的更多相关文章

  1. OpenGL进阶演示样例1——动态画线（虚线、实线、颜色、速度等）

            用OpenGL动态绘制线段.事实上非常easy,但到如今为止.网上可參考资料并不多. 于是亲自己主动手写一个函数,方便动态绘制线段.代码例如以下: #include<GL/glu ...

  2. 第五讲：使用html5中的canvas动态画出物理学上平抛运动

    <html> <head> <title>平抛运动</title> <script src="../js/jscex.jscexRequ ...

  3. html5使用canvas动态画医学设备毫秒级数据波形图

  4. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

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

  5. VC动态轨迹画线

    分类: 2.4 线程/图形学2010-04-30 22:14 1878人阅读 评论(0) 收藏 举报 文档null 这是一个绘制直线的简单绘图程序,能过实现动态轨迹画线,在拖动时产生临时线来表示可能画 ...

  6. 兼容IE浏览器的canvas画线和圆圈

    1.新建test.html文件,代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8& ...

  7. Android中Path类的lineTo方法和quadTo方法画线的区别

    转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...

  8. C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9

    视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...

  9. 用CSS3和Canvas来画网格

    我们经常使用一些excel表格来处理数据,在html中,我们可以用table来制成表格.今天来看一下一些不同的方法. 方法一:使用CSS3的background的linear-gradient属性 l ...

随机推荐

  1. Linux Shell脚本编程－－Head/Tail命令详解

    head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾,看看下面的范例:## ( ...

  2. 自定义一个只显示年月的DatePicker（UIDatePicker无法实现年月显示）

    HooDatePicker 介绍(introduction) ==================================================项目需要一个DatePicker,只显 ...

  3. Android 完整开源应用，完整开源项目

    (Antox)聊天的  (new)   (OpenKeychain)OpenPGP在android上的实现  (new)   (Flock)提供同步服务   (OpenFlappyBird)曾经火爆的 ...

  4. 配置指定使用tcc编译器编译nim程序

    1.前言 nim是什么? nim是一门静态编译型语言,语法类似python,nim的代码被翻译成C代码再被C编译器编译成可执行文件.因此nim的可执行文件比较小,性能应该也不错. 最简单的nim程序就 ...

  5. UIScrollerView遇到UINavigationController

    今天在UITabBarController  的第一个Tab 页面中放入一个ScrollView, 原本以为可以正常运行. 结果却让人大跌眼镜.  每当我手动滚动或者 缓慢导航到另外一个页面时,当前的 ...

  6. SQL server存储过程语法及实例（转）

    存储过程如同一门程序设计语言,同样包含了数据类型.流程控制.输入和输出和它自己的函数库. --------------------基本语法-------------------- 一.创建存储过程cr ...

  7. ios之JavaScript

    初次接触java脚本,感觉java脚本so interesting!为什么呢?写javascript代码感觉就像是在记流水账,无拐弯抹角,一个字,就是"干",想怎么干就怎么干,哈哈 ...

  8. 让低版本IE支持css3背景图片缩放属性background-size

    IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...

  9. 【zz】matlab 直方图匹配

    原文地址:http://www.cnblogs.com/tiandsp/archive/2012/12/19/2825418.html 直方图匹配或叫做直方图规定化都可以,是把原图像的直方图按照给定的 ...

  10. iscroll修改

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...