代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas鼠标画图</title>

    <style>

        body {

            background-color: yellow;

        }

        #c1{

            background-color: white;

        }

    </style>

<script>

    window.onload = function() {

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

        var oCG = oC.getContext('2d');

        oC.onmousedown = function(ev) {

            var ev = ev || window.event;

            oCG.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);

            //ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop鼠标在当前画布上X,Y坐标

            document.onmousemove = function(ev) {

                var ev = ev || window.event;//获取event对象

                oCG.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);

                oCG.stroke();

            };

            oC.onmouseup = function() {

                document.onmousemove = null;

                document.onmouseup = null;

            };

        };

    };

</script>

</head>

<body>

    <canvas id="c1" width="400px" height="400px"> <!--宽高写在html里，写在css里有问题-->

        <span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->

    </canvas>

</body>

</html>

效果如图：

原生js实现用鼠标画图的更多相关文章

  1. 使用原生JS，实现鼠标点击爱心效果 ！！！

    使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...

  2. 原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测

    预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...

  3. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  4. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  5. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  6. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  7. 原生js添加博客点击鼠标出小心心效果~~

    昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...

  8. 原生js及H5模拟鼠标点击拖拽

    一.原生js 1.拖拽的流程动作 鼠标按下 触发onmousedown事件 鼠标移动 触发onmousemove事件 鼠标松开 触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限 ...

  9. 61.H5---利用canvas+原生js进行鼠标跟随绘图

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

随机推荐

  1. Python3.6全栈开发实例[022]

    22.完成彩票36选7的功能. 从36个数中随机的产生7个数. 最终获取到7个不重复的数据作为最终的开奖结果.随机数: from random import randintrandint(0, 20) ...

  2. 目标是：互联网方向的Java开发工程师

    我们需要这样完美的你: --师出名门:应届统招本科及以上学历,计算机相关专业: --技艺超群:熟悉JAVA面向对象编程, J2EE体系结构,熟悉Struts2.Spring.Ibtais.Memcac ...

  3. IDEA创建Tomcat8源码工程流程

    上一篇文章的产出,其实离不开网上各位大神们的辅助,正是通过他们的讲解,我才对Tomcat的结构有了更进一步的认识. 但在描述前后端交互的过程中,还有很多细节并没有描述到位,所以就有了研究Tomcat源 ...

  4. 剑指offer 面试28题

    面试28题: 题目:对称的二叉树题: 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的 解题思路: 可以定义一种遍历算法,先遍历右子节点再遍 ...

  5. 自制Javascript浮动广告

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb ...

  6. Django基础(一)_URLconf、Views、template、ORM

    一 什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有 ...

  7. Sliverlight变换特性

    通过变换,可以为Silverlight图形对象提供旋转.缩放.扭曲和移动的特效.如果图形元素需要通过修改坐标系统来改变元素显示,可能需要使用变换功能.一般来说,所有的变换使用矩形数学改变图形元素的坐标 ...

  8. 023_数量类型练习——Hadoop MapReduce手机流量统计

    1) 分析业务需求:用户使用手机上网,存在流量的消耗.流量包括两部分:其一是上行流量(发送消息流量),其二是下行流量(接收消息的流量).每种流量在网络传输过程中,有两种形式说明:包的大小,流量的大小. ...

  9. 【leetcode刷题笔记】Word Ladder II

    Given two words (start and end), and a dictionary, find all shortest transformation sequence(s) from ...

  10. 给嵌入式linux串口添加密码的一些总结

    要添加串口登录密码就需要修改 /etc/inittab 文件的配置 但是不同的开发板情况不一样,有的是没有这个文件的,BusyBox会检查/etc/inittab文件是否存在, 如果此文件不存在, B ...