原生js实现用鼠标画图
代码如下:
<!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实现用鼠标画图的更多相关文章
- 使用原生JS,实现鼠标点击爱心效果 !!!
使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...
- 原生JS实现随着鼠标滚动到元素位置触发对应css3动画,简单易用滚动监测
预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- 原生js添加博客点击鼠标出小心心效果~~
昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...
- 原生js及H5模拟鼠标点击拖拽
一.原生js 1.拖拽的流程动作 鼠标按下 触发onmousedown事件 鼠标移动 触发onmousemove事件 鼠标松开 触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限 ...
- 61.H5---利用canvas+原生js进行鼠标跟随绘图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 操作系统/应用程序、操作中的“并发”、线程和进程,python中线程和进程(GIL锁),python线程编写+锁
并发编程前言: 1.网络应用 1)爬虫 直接应用并发编程: 2)网络框架 django flask tornado 源码-并发编程 3)socketserver 源码-并发编程 2.运维领域 1)自动 ...
- servle 3.0 新特性之一 对上传表单的支持
1. 上传 * 上传对表单的要求: > method="post" > enctype="multipart/form-data",它的默认值是:a ...
- msql 2000 使用DBCC CHECK DB 得出错误,槽引用错误
转自:http://www.cnblogs.com/firstrose/p/4256257.html 某个SQL2000的数据库,在通过备份/还原的方法升级到2005时发生错误: 查找解决方法未果 正 ...
- Dubbo学习和配置(转载)
转载自: 简单了解下Dubbo 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架, ...
- HAProxy的访问控制
HAProxy的ACL用于实现基于请求报文首部.响应报文的内容或其他的环境状态信息来做出转发决策,这大大增强了其配置弹性,其配置法则通常分为两步,首先去定义ACL,即定义一个测试条件,而后在条件得到满 ...
- 标准c数学函数使用方法
cppreference.com -> 标准c数学函数 -> 详解 标准c数学函数 abs 语法: #include <stdlib.h> int abs( int ...
- Centos小脚本(sftp)
sftp用户创建,改变属组,家目录 #!/bin/python import os,sys class sftp_user(object): def __init__(self,user,passwd ...
- rails 增删改查
class InvoicesController < ApplicationController def index @invoices = Invoice.all end def show @ ...
- js判断有无属性
访问元素属性 getAttribute 不存在返回null,特性名可不区分大小写 dom对象访问公共属性,自定义属性不能访问,div.id 访问对象属性 1.使用in关键字 该方法可以判断对象的自有属 ...
- $用python玩点有趣的数据分析——一元线性回归分析实例
Refer:http://python.jobbole.com/81215/ 本文参考了博乐在线的这篇文章,在其基础上加了一些自己的理解.其原文是一篇英文的博客,讲的通俗易懂. 本文通过一个简单的例子 ...