canvas鼠标点击划线
今天学习了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鼠标点击划线的更多相关文章
- html5的canvas鼠标点击画圆
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- Canvas鼠标点击特效(富强、民主...)、收藏
<script> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").cl ...
- html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
- HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
- 获取鼠标点击相对于Canva位置的2种方法
如果给Canvas添加 onmousedown事件,获取到的鼠标位置都是相对于当前文档的位置(x,y):
- canvas实现点击带水纹的按钮
咱今天在闲逛网页时,看到一个点击带水纹的按钮特效,尼玛,写的还挺好,先看效果: 于是就奔着升级版的拿来主义,别人的好东西,咱都要拿来滴,so,扒代码! 完整代码在最后,是经过我的改进优化滴. 在这里先 ...
- JQuery和html+css实现鼠标点击放烟花
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...
- WEBGL学习【十三】鼠标点击立方体改变颜色的原理与实现
// PickFace.js (c) 2012 matsuda and kanda // Vertex shader program var VSHADER_SOURCE = 'attribute v ...
- JS实现鼠标点击爱心&绘制多边形&每日一言功能
本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...
随机推荐
- [模板] 动态ST表
ST表本身是不可修改的. 如果考虑增加一个数,可以把ST表反过来写,即f[i][j]表示i往前1<<j个数,一个数最多影响logn个数,常数非常小. #include<iostrea ...
- MySQL存储过程实践
对employees数据库建立存储过程 创建不含有输入输出变量的存储过程 DELIMITER // -- 设定语句结束分隔符 DROP PROCEDURE IF EXISTS GetEmployees ...
- Windows Server定时执行bat
大家应该知道是在window服务器下使用bat批处理脚本文件,如果是Linux操作系统则是使用xshell脚本文件.由于自己是在做项目的时候对于文件系统中的日志进行定期删除对bat和xshell进行简 ...
- 剑指Offer(书):数组中重复的数字
题目:找出数组中重复的数字. 说明:在一个长度为n的数组里的所有数字都在0~n-1的范围内,数组中某些数字是重复的,但是不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意一个重复的数 ...
- sql中getdate()&convert的使用
1,sql中getdate()函数的使用: getdate()函数从SQL Server中返回当前的时间和日期,如: insert into T3(ID,AddTime) values(,GETDAT ...
- 前端传list,springmvc接收list的方法
handler: function() { var baseCustomerForm = me.getAddBaseCustomerForm().getForm(); var linkStore = ...
- 洛谷P1432 倒水问题
题目背景 In the movie "Die Hard 3", Bruce Willis and Samuel L. Jackson were confronted with th ...
- Error:Uninitialized object exists on backward branch 70 Exception Details:
网上下载了一个demo,编译出现如下错误: Gradle sync failed: Uninitialized object exists on backward branch 70 Exceptio ...
- [Usaco2007 Oct] Super Paintball超级弹珠
Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 489 Solved: 384[Submit][Status][Discuss] Description ...
- mysql 常用管理命令
常见的管理mysql命令 (1)用于选择在MySQL工作区指定的数据库(选择数据库): USE Databasename; (2)列出了MySQL数据库管理系统中的所有可访问的数据库: SHOW DA ...