今天学习了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. 数的计数(noip2001,动态规划递推)

    题目链接: 普通版: https://www.luogu.org/problemnew/show/P1028 数据加强版: https://www.luogu.org/problemnew/show/ ...

  2. ArrayList 和 LinkedList 区别。

    1. ArrayList和LinkedList都是实现了List接口的容器类,用于存储一系列的对象引用.他们都可以对元素的增删改查进行操作. 2. ArrayList是实现了基于动态数组的数据结构,L ...

  3. [LUOGU] [NOIP2017] P3960 列队

    题目描述 Sylvia 是一个热爱学习的女孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有 n \times mn×m 名学生,方阵的行 ...

  4. [LOJ] 分块九题 8

    区间查询数值+整体赋值 维护tag代表整个区间被赋成了tag[i] 用pushdown操作,而不是修改了再check. 不压缩代码了,调起来心累,长点有啥不好. //Stay foolish,stay ...

  5. 条款36：绝不重新定义继承而来的non-virtual函数（Never redefine an inherited non-virtual function）

    NOTE: 1.绝对不要重新定义继承而来的non-virtual函数.

  6. JAVA：ssm框架搭建

    文章来源:http://www.cnblogs.com/hello-tl/p/8328071.html 环境简介 : jdk1.7.0_25/jdk1.8.0_31  tomcat-7.0.81  m ...

  7. LeetCode（169）Majority Element

    题目 Given an array of size n, find the majority element. The majority element is the element that app ...

  8. POJ 2728 Desert King(最优比率生成树， 01分数规划)

    题意: 给定n个村子的坐标(x,y)和高度z, 求出修n-1条路连通所有村子, 并且让 修路花费/修路长度 最少的值 两个村子修一条路, 修路花费 = abs(高度差), 修路长度 = 欧氏距离 分析 ...

  9. POJ 2976 Dropping test（01分数规划模板）

    01分数划分详情可阅读:http://www.cnblogs.com/perseawe/archive/2012/05/03/01fsgh.html 题意: 给出n个a和b,让选出n-k个使得最大 二 ...

  10. Hibernate入门（1）——环境搭建

    什么是Hibernate?为什么使用Hibernate?Hibernate有什么优缺点?网上很多大神的文章又详细又通俗易懂. 步骤: 1.创建数据库表格. 2.编写JavaBean实体类. 3.下载H ...