HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘图小实例之鼠标画线</title>
<style>
body{ background:#000;}
#canvas1{ margin:100px 500px; background:#fff;}
#canvas1 span{ color:#fff;}
</style>
<script>
window.onload = function(){
var oCanvas = document.getElementById('canvas1');
var oContext = oCanvas.getContext('2d'); //获取绘图的2d环境
oCanvas.onmousedown = function(ev){
ev = ev || window.event;
oContext.beginPath();
oContext.moveTo(ev.clientX - oCanvas.offsetLeft,ev.clientY - oCanvas.offsetTop);
document.onmousemove = function(ev){
ev = ev || window.event;
oContext.lineTo(ev.clientX - oCanvas.offsetLeft,ev.clientY - oCanvas.offsetTop);
oContext.stroke();
}
document.onmouseup = function(ev){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
</script>
</head>
<body>
<canvas id="canvas1" width="1000" height="1000">
<span>该浏览器不支持canvas</span>
</canvas>
</body>
</html>
HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线的更多相关文章
- HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 15 ]canvas绘图实例之钟表
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- HTML5自学笔记[ 24 ]canvas绘图之星空草地
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
- HTML5自学笔记[ 16 ]canvas绘图基础3
canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...
随机推荐
- Cheatsheet: 2013 10.09 ~ 10.23
Other 10 Basic Linux Networking and Monitoring Commands You Should Know A simple, portable yet effic ...
- Cheatsheet: 2013 09.10 ~ 09.21
.NET Lucene.Net – Custom Synonym Analyzer Using FiddlerCore to Capture Streaming Audio Immutable col ...
- GoAccess日志分析工具使用文档
----Sevck 2016/3/4 17:24:13 #1软件说明: GoAccess是一款开源.实时,运行在命令行终端下的web日志分析工具.该工具提供快速.多样的HTTP状态统计,可以令管理员不 ...
- Codeforces Round #259 (Div. 2)AB
链接:http://codeforces.com/contest/454/problem/A A. Little Pony and Crystal Mine time limit per test 1 ...
- C#中Application.DoEvents()的作用
Visual Studio里的摘要:处理当前在消息队列中的所有 Windows 消息. 交出CPU控制权,让系统可以处理队列中的所有Windows消息,比如在大运算量循环内,加Application. ...
- C/C++内存泄漏及检测 转
C/C++内存泄漏及检测 2011-02-20 17:51 by 吴秦, 30189 阅读, 13 评论, 收藏, 编辑 “该死系统存在内存泄漏问题”,项目中由于各方面因素,总是有人抱怨存在内存泄漏, ...
- Android调用系统 Set As Intent
调用方法如下: Intent intent = new Intent(Intent.ACTION_ATTACH_DATA); intent.addCategory(Intent.CATEGORY_DE ...
- ZOJ-2364 Data Transmission 分层图阻塞流 Dinic+贪心预流
题意:给定一个分层图,即只能够在相邻层次之间流动,给定了各个顶点的层次.要求输出一个阻塞流. 分析:该题直接Dinic求最大流TLE了,网上说采用Isap也TLE,而最大流中的最高标号预流推进(HLP ...
- Android_使用 OpenVPN
1. 需要 root http://www.doc88.com/p-847633362717.html http://bbs.gfan.com/android-3679297-1-1.html 需要 ...
- HDU5886 Tower Defence 【两遍树形dp】【最长链预处理】
题意:N个点的一棵带权树.切掉某条边的价值为切后两树直径中的最大值.求各个边切掉后的价值和(共N-1项). 解法一: 强行两遍dp,思路繁琐,维护东西较多: dis表示以i为根的子树的直径,dis2表 ...