今天学习了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. 02numpy

    一． Numpy定义 一个在Python中做科学计算的基础库,重在数值计算,也是大部分PYTHON科学计算库的基础库,多用于在大型.多维数组上执行数值运算 二． Numpy使用 1.创建数组 2.nu ...

  2. 第十章：C++标准模板库

    主要内容: 1.泛型程序设计 2.与STL有关的概念和术语 3.STL的容器 4.迭代器 5.STL的算法 6.函数对象 暂时略,内容有点多,而且也很重要!但我看完了,日后补上.

  3. 【HIHOCODER 1576】 子树中的最小权值（线段树维护DFS序）

    描述 给定一棵N个节点的树,编号1~N.其中1号节点是根,并且第i个节点的权值是Vi. 针对这棵树,小Hi会询问小Ho一系列问题.每次小Hi会指定一个节点x,询问小Ho以x为根的子树中,最小的权值是多 ...

  4. OI中的小智慧

    反正不会咕咕的. sort之类没+1的问题不说 双向边n*2的问题不说 变量n+5的问题不说 1.先生成后判断 (见NOIP 2016 pj t2回文日期) 这个思想在这道题体现的不明显,记得洛谷上面 ...

  5. Ubuntu 配置Apache虚拟目录

    http://blog.csdn.net/spring21st/article/details/6589300 Ubuntu 配置Apache虚拟目录 http://blog.csdn.net/spr ...

  6. F5 TCP Traffic Flow v0.5

    300dpi高清版下载地址 http://down.51cto.com/data/2332253

  7. Poj1704:staircase nim【博弈】

    题目大意:有一个无限长的一维的棋盘,棋盘上N个格子放置着棋子.两个人轮流操作,每次操作能选择其中一个棋子向左移动,但不能越过其它棋子或者两枚棋子放在同一格中,最后不能操作的人算输,问先手是否必胜? 思 ...

  8. 如何打开Oracle的dmp文件

    在工作中经常使用到别人提供过来的dmp文件,由于不知道备份时所用的用户名,这样就不能恢复. 通过打开DMP文件可以查看到备份时使用的用户名. 1.如果dmp文件比较小,用文本编辑器打开就可以了. 2. ...

  9. Android基本动画

    Android基本动画 Android Animations动画使用详解 一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XM ...

  10. angularjs ngRoute的使用简单例子

    很丑的小例子,刚学angularjs,写下来方面以后看. 1.例子的工程目录如下: 2.index.html代码如下: <!DOCTYPE html><html><hea ...