<!--
实现鼠标按下的时候，移动进行绘制，鼠标抬起结束绘图，
用到的事件有mousedown mousemove mouseup
用的的canvas api 有 beginPath moveTo lineTo stroke

涉及到了内容有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. Java特性-动态代理

    代理在开发中无处不在: 我们完成一个接口开发A,接口下有很多个实现类,这些类有些共同要处理的部分,比如每一个类都定义了接口A中的方法getXX(String name).我现在想把每次调用某个实现类的 ...

  2. 浅谈c语言的指针

    对于非计算机专业的同学,c语言的指针往往就是老师的一句“指针不考“就带过了.c语言的指针号称是c语言的灵魂,是c语言中最精妙的部分. 指针本质上也是变量,也就是一段内存,只是他的特殊之处是他存储的数据 ...

  3. VS 工程的 输出路径和工作路径的区别

    输出路径,是vs编译项目生成可执行文件的路径:工作路径是环境变量,比如我们在程序中写相对路径,就是以这个路径为基础的.在默认情况下,输出路径和工作路径都不写的话,默认是程序的bin下面的debug或者 ...

  4. web开发中常用的技术体系

    HTML html(HyperText  Markup  Language)超文本标记语言"超文本"就是指页面内可以包含图片.链接.程序等非文字元素. 超文本标记语言的结构包括&q ...

  5. UITableView去掉section的header的粘性

    思路:若header的高度为25,在滑动的时候将scrollView的内容偏移量上衣25,其实他还是粘在上面只不过我们看不到他了. ///---用于判断往上滑还是往下滑 var deltaY:CGFl ...

  6. Linux内核分析——进程描述与创建

    20135125陈智威 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验内容 ...

  7. nfs文件系统挂载错误及解决方法

    挂载nfs时出现如下错误: 原因: 没有安装nfs客户端相关 解决方法: apt-get install nfs-common 参考资料: http://askubuntu.com/questions ...

  8. fork函数创建新进程过程分析

    gdb调试执行流程,首先设置断点b sys_clone,当在shell下输入fork命令后,系统执行至断点,接下来按步执行: 判断是否被跟踪 判断是否被创建为轻量级进程(vfork) 判断父进程是否被 ...

  9. Python常用函数、方法、模块记录

    常用函数: 1.pow():乘方 2.abs():绝对值 3.round():四舍五入 4.int():转换为整数 5.input():键盘输入(会根据用户的输入来做类型的转换) raw_input( ...

  10. android 返回键 操作

    cocos2dx项目移植到android平台上对于 android手机返回键,主菜单键等键的相关操作,本篇详细对返回键做个简单的介绍说明, 不足不对之处,请同猿们指出. 首先在主activity下,即 ...