html5之canvas画图 1.写字板功能
写字板事例：
写字板分析：1.点击鼠标開始写字（onmosedown）2.按下鼠标写字（onmousemove）3.松开鼠标，停下写字（撤销onmousemove事件）：
代码:
<strong><!doctype html>
</strong><html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#canvas {
margin: 0px;
padding: 0px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">当前浏览器不支持canvas</canvas>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="arrow.js"></script>
<script type="text/javascript">
window.onload=function(){ var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d"); /*var mouse=utils.captureMousePosition(canvas); */ //加入mousedown监听事件。在用户鼠标按下后開始画线。并注冊mousemove事件
canvas.addEventListener("mousedown",function(event){ context.beginPath();
context.moveTo(event.clientX, event.clientY);
//alert("-------------")
canvas.addEventListener("mousemove",onMouseMove,false);
},false); //在鼠标移动时划线
function onMouseMove(event){
context.lineTo(event.clientX,event.clientY);
context.stroke();
}
//在鼠标按键松开后，注销鼠标移动事件
canvas.addEventListener("mouseup",function(event){
canvas.removeEventListener("mousemove",onMouseMove,false);
},false);
}
</script>
</body>
</html>
html5之canvas画图 1.写字板功能的更多相关文章
- html5之canvas画图基础
HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...
- canvas h5制作写字板
<!DOCTYPE html><html><head> <meta charset="utf-8"> <script type ...
- html5之canvas画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- JS+HTML5的Canvas画图模拟太阳系运转
查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: < ...
- HTML5使用canvas画图时，图片被自动放大模糊的问题
最近在研究canvas技术,发现一个问题,就是所画图像会随着画布大小自动变换大小.原因如下 <canvas id="cxt" style="width: 500px ...
- canvas画布，写字板
<!doctype html><html><head> <meta charset="utf-8"> <meta http-e ...
- HTML5 Canvas 画图入门
HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
- html5 Canvas画图3：1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
随机推荐
- Oracle体系结构及备份（十六）——bg-ckpt
一 什么是CKPT进程 作用: 发出信号给DBWn 更新数据文件头 更新控制文件 At specific times, all modified databasebuffers in the sys ...
- mysql ga rc beta alpha区别
alpha 暗示这是一个以展示新特性为目的的版本,存在比较多的不稳定因素,还会向代码中添加新新特性 beta 以后的beta版.发布版或产品发布中,所有API.外部可视结构和SQL命令列均不再更改, ...
- yield的使用
参考: http://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ http://blog.csdn.net/alvine0 ...
- Hadoop 组成
这里介绍一下hadoop的组成, hadoop主要由两部分组成,,一个是hdfs,还有一个是mapreduce 这两个部分在hadoop 2.2.0中分别用start-dfs.sh和start-yar ...
- Myeclipse反编译插件(jad)的安装和使用
在开发过程中我们肯定会遇到这样的问题,当我们调试程序的时候,走到一个地方发现引用了一个第三方的东西,点进去一看,会出现一下的画面,没有源代码!!!! 这让人很头疼,今天给大家介绍一个Myeclipse ...
- 【BZOJ】【1178】【APIO2009】convention会议中心
贪心 如果不考虑字典序的话,直接按右端点排序,能选就选,就可以算出ans…… 但是要算一个字典序最小的解就比较蛋疼了= = Orz了zyf的题解 就是按字典序从小到大依次枚举,在不改变答案的情况下,能 ...
- 时间插件WdatePicker使用方法
只需要引入js文件即可: <script src="WdatePicker/WdatePicker.js"></script> 自己试了个小实例: < ...
- 解决 WIn7 启动时“你有等待写入光盘的文件”
这几天启动时Win7总是要提示“您有等待写入光盘的文件”,启动时间也变慢. 可能是前几日通过资源管理器刻录光盘的时候留下的垃圾. 在C:\Users\ibm\AppData\Local\Microso ...
- 解决spark中遇到的数据倾斜问题
一. 数据倾斜的现象 多数task执行速度较快,少数task执行时间非常长,或者等待很长时间后提示你内存不足,执行失败. 二. 数据倾斜的原因 常见于各种shuffle操作,例如reduceByKey ...
- XML基础以及用DOM4j读取数据
都知道,HTML被设计用来显示数据,XML被设计用来保存.数据传输.而我们平时经经常使用的无非是保存数据.读取数据.所以这里主要介绍XML相关基础内容.以及用DOM4j来存取XML的数据. 以下简单介 ...