<!--
实现鼠标按下的时候，移动进行绘制，鼠标抬起结束绘图，
用到的事件有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. php 导出对象生成代码并执行var_export和eval

    var_export($obj,true) 导出一个合法的php代码,返回一个字符串 eval($str) 执行一个字符串代码 __set_state 当用var_export导出一个类时,自动调用, ...

  2. linux下系统编程C环境搭建

    一.系统安装 我使用的是VMware8下的ubuntu12.04,这是培训老师说的,12.04相对来说,比较新,而且是5年长期支持版,不容易过时.对于系统的安装,我不想说很多,只是希望大家主义这几点: ...

  3. android 代码优化

    http://android.tgbus.com/Android/androidnews/200812/172247.shtml http://blog.163.com/jzq_520/blog/st ...

  4. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  5. 堆排序C++实现

    /* * heapsort.cpp * * Created on: 2016年3月30日 * Author: Lv_Lang */ //堆排序 #include <iostream> us ...

  6. 数据库Mysql学习笔记(一)

    Mysql 数据库是数据库初学者最佳的选择的,其语法简单,采用的非底层的SQL语言定义(DDL).操作(DML).控制(DCL)数据库. 入门知识:服务器.库.表. (1)安装Mysql服务器.配置文 ...

  7. 手机web页面开发-第一弹

    毕业设计题目<基于three.js的太阳系全景漫游>,项目开发运行在手机端,开始学习手机端页面开发. 新建index.html,写meta标签.meta标签分为两大部分:http标题信息( ...

  8. GGXX的卡通渲染实现 真的好变态......

    最近在youtube上看了GDC,学了很多东西,最让我震撼的就是ggxx的卡通渲染了.感慨一下,想要用3D做出二次元的效果,真的不容易.现记录一些要点: 1)不要使用normal map来做cel-s ...

  9. Java 网络爬虫获取网页源代码原理及实现

    Java 网络爬虫获取网页源代码原理及实现 1.网络爬虫是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成.传统爬虫从一个或若干初始网页的URL开始,获得初始网页上的URL ...

  10. 最近开发的ECG项目

    最近参与公司开发了一款读取ECG心电接口程序 原理就是通过心电设备读取患者的心电数据 并生成ECG文件 然后通过ECG客户端程序读取ECG文件 并解析转换成图片 上传至服务器 下边是客户端程序截图 客 ...