今天学习了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. HDU-1297-Children’s Queue

    Children’s Queue 这道题是排序问题,可以用递归方法解决. 计算F(n): 一:当最后一个是男孩M时候,前面n-1个随便排出来,只要符合规则就可以,即是F(n-1): 二:当最后一个是女 ...

  2. MySQL字符集设定与查询

    一.字符集设定 MySQL数据库允许对服务器.数据库.数据表.数据列级别的字符集作出互不影响的设定. 1.对服务器字符集设定是通过配置文件中选项character-set-server 设置,如 ch ...

  3. 1. 调整InnoDB系统表空间的大小

    1. 调整InnoDB系统表空间的大小 介绍如何增大或减小InnoDB系统表空间的大小 . 1.1 增加InnoDB系统表空间大小 增加InnoDB系统空间最简单的方法就是,在配置文件中配置autoe ...

  4. 【JDBC-MVC模式】开发实例

    JDBC - 开发实例-MVC模式  1. 在web.xml中配置连接数据库的信息 web.xml: <context-param> <param-name>server< ...

  5. JS模块之AMD, CMD, CommonJS、UMD和ES6模块

    CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...

  6. c++_核桃的数量

    #include <iostream> using namespace std; int gcd(int x,int y){ int temp; ){ temp=x%y; x=y; y=t ...

  7. gcc编译详解

    GCC(GNU Compiler Collection,GNU编译器套件),是由 GNU 开发的编程语言编译器.它是以GPL许可证所发行的自由软件,也是 GNU计划的关键部分.GCC原本作为GNU操作 ...

  8. Django框架基础知识03-模板变量及模板过滤器

    模板变量及模板过滤器. 1.模板路径的查找 -查找顺序 1.尝试,在app目录下存放模板. -两种方案 1.app项目文件夹下存放. 2.templates文件夹下分类存放. 首先查找项目settin ...

  9. Python数据分析 Pandas模块 基础数据结构与简介(一)

    pandas 入门 简介 pandas 组成 = 数据面板 + 数据分析工具 poandas 把数组分为3类 一维矩阵:Series 把ndarray强大在可以存储任意数据类型可以专门处理时间数据 二 ...

  10. 什么是slug URL 中的 slug

    How would you reference this object with a URL, with a meaningful name? You could use Article.id so ...