今天学习了canvas，打算写一个鼠标划线的效果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body{

            background-color: black;

        }

        canvas{

            background-color: white;

        }

    </style>

    <script type="text/javascript">

        window.onload= function(){

            var oc= document.getElementById('c1');

            var ogc=oc.getContext('2d');

            oc.onmousedown = function(ev){

                var ev=ev || window.event;

                ogc.moveTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop);

                document.onmousemove = function(ev){

                    var ev = ev || window.event;

                    ogc.lineTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop);

                    ogc.stroke();

                };

                document.onmouseup = function(){

                    document.onmousemove = null;

                    document.onmouseup = null;

                };

            }

        }

    </script>

</head>

<body>

    <canvas id="c1" width="" height="">

    </canvas>

</body>

</html>

如上通过简单的moveTo lineTo功能实现效果

canvas鼠标点击划线的更多相关文章

  1. html5的canvas鼠标点击画圆

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  2. Canvas鼠标点击特效（富强、民主...）、收藏

    <script> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").cl ...

  3. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  4. HTML5 Canvas鼠标与键盘事件

    演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...

  5. 获取鼠标点击相对于Canva位置的2种方法

    如果给Canvas添加 onmousedown事件,获取到的鼠标位置都是相对于当前文档的位置(x,y):

  6. canvas实现点击带水纹的按钮

    咱今天在闲逛网页时,看到一个点击带水纹的按钮特效,尼玛,写的还挺好,先看效果: 于是就奔着升级版的拿来主义,别人的好东西,咱都要拿来滴,so,扒代码! 完整代码在最后,是经过我的改进优化滴. 在这里先 ...

  7. JQuery和html+css实现鼠标点击放烟花

    <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...

  8. WEBGL学习【十三】鼠标点击立方体改变颜色的原理与实现

    // PickFace.js (c) 2012 matsuda and kanda // Vertex shader program var VSHADER_SOURCE = 'attribute v ...

  9. JS实现鼠标点击爱心&绘制多边形&每日一言功能

    本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...

随机推荐

  1. [题解] cogs 1669 神秘的咒语

    http://cogs.pro:8080/cogs/problem/problem.php?pid=1669 "The Real Incantation is Their Common In ...

  2. [LUOGU] P1962 斐波那契数列

    求斐波那契第n项. [f(n-1) f(n)] * [0,1] = [f(n) f(n+1)] [1,1] 由此原理,根据矩阵乘法的结合律,用快速幂算出中间那个矩阵的n次方即可. 快速幂本质和普通快速 ...

  3. PHP中GD库函数

    画椭圆弧 imagearc($image,$cx,$cy,$width,$height,$angel1,$angel2,$color) 注释:$image 图像资源   $cx  椭圆中心点的水平位置 ...

  4. django实现github第三方本地登录

    1.安装 pip install social-auth-app-django 2.生成Client ID和Client Secret 3.修改setting.py INSTALLED_APPS = ...

  5. python版 定时任务机制

    定时任务的原理 服务器执行一个python脚本 这个脚本,循环执行配置的定时任务地址 Python请求地址, 该地址应该返回, 下次再来执行的秒数. 也就是任务的频率 比如任务希望每3秒执行一次, 那 ...

  6. (二十三)Python 3 文件操作

    文件处理流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 打开文件的模式有三种: 只读模式(默认) 只写模式(不可读,不存在则创建,存在则覆盖) 追加模式(可读,不存在则 ...

  7. PCB线宽与电流计算器--在线计算

    http://eda365.com/article-12-1.html 计算线宽与载流量的关系,方便设计:单个人建议在有限的空间尽量将大电流线路加宽.

  8. C++实现顺序栈类求解中缀表达式的计算

    控制台第一行打印的数值为使用形如以下方式得到的结果: cout << +*(+)*/- << endl; 即第一个待求解表达式由C++表达式计算所得结果,以用于与实现得出的结果 ...

  9. Android View加载圆形图片且同时绘制圆形图片的外部边缘边线及边框：LayerDrawable实现

     Android View加载圆形图片且同时绘制圆形图片的外部边缘边线及边框:LayerDrawable实现 LayerDrawable实现的结果和附录文章1,2,3中的layer-list一致. ...

  10. PHP建立和删除目录

    <?php/*linux中的文件权限filedir 用户 组 其它 rwx rwx rwx 读写执行 6 4 6 读写 读 读写 7 7 7 rw_ r__ rw_ r__ _w_ ___ r ...