今天学习了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. js hover 下拉框

    <div class="box"> <div class="a f">111111</div> <div class= ...

  2. vue在传值的时候经常遇到的问题

    在我用vue编写程序的时候,在传值的时候,经常会遇到些问题,像今天遇到了两个问题,在用父传子的方法去传值,当父组件中的要传的数据是for循环出来的或者是列表的时候,你想每次运行的事件,都去传某一行,或 ...

  3. Manjaro/Arch linux 安装输入法

    输入命令: sudo pacman -Syu fcitx fcitx-googlepinyin fcitx-im fcitx-configtool 编辑 ~/.xprofile:# xfcitxexp ...

  4. ZOJ - 1655 Transport Goods（单源最长路+迪杰斯特拉算法）

    题目: 有N-1个城市给首都(第N个城市)支援物资,有M条路,走每条路要耗费一定百分比(相对于这条路的起点的物资)的物资.问给定N-1个城市将要提供的物资,和每条路的消耗百分比.求能送到首都的最多的物 ...

  5. Java中的线程安全和非线程安全以及锁的几个知识点

    1. 线程安全就是多线程访问时,采用了加锁机制,当一个线程访问该类的某个数据时,进行保护,其他线程不能进行访问直到该线程读取完,其他线程才可使用.不会出现数据不一致或者数据污染. 线程不安全就是不提供 ...

  6. django扩展User模型（model）,profile

    from django.contrib.auth.models import User # Create your models here. class Profile(models.Model): ...

  7. 条款8：别让异常逃离析构函数（prevent exception from leaving destructors）

    NOTE: 1.析构函数绝对不要吐出异常.如果一个被析构函数调用的函数可能抛出异常,析构函数应该扑捉任何异常,然后吞下他们(不传播)或结束程序. 2.如果客户需要对某个操作函数运行期间抛出的异常做出反 ...

  8. 剑指Offer（书）：删除链表的节点

    题目:在O(1)的时间内删除列表节点. /** * 步骤: * 1.检查head与removeNode节点是否为空 * 2.检查removeNode的后一个节点是否为空,不为空则使用后一个节点的值覆盖 ...

  9. CentOS 6.5 x64 安装jdk8

    1.去官网下载Linux版本的jdk8,我下载的是下面这个 2.下载xftp和xshell来操纵服务器,可以搜索一下下载安装即可,安装完成后,打开xshell,新建链接为你的云服务器的IP地址和密码, ...

  10. nginx.conf的完整配置说明

    #用户 用户组 user www www; #工作进程,根据硬件调整,有人说几核cpu,就配几个,我觉得可以多一点 worker_processes 5: #错误日志 error_log logs/e ...