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 12c on Solaris 10 安装文档
http://www.orasql.com/blog/archives/2013/08/20/12c_solaris.htm
- makfile.am 和makefile.in 的使用
参考 http://blog.csdn.net/vevenlcf/article/details/48134313 http://linux.chinaunix.net/techdoc/develop ...
- 05引用类型以及特殊引用类型string
基本 □ 哪些属于引用类型 类(object,string),接口.数组.委托 □ 引用类型分配在哪里 ● 引用类型变量位于线程栈. ● 引用类型实例分配在托管堆上. ● 当引用类型实例的大小小于85 ...
- Major GC 是清理老年代。 Full GC 是清理整个堆空间—包括年轻代和老年代。
Major GC 是清理老年代. Full GC 是清理整个堆空间—包括年轻代和老年代.
- ndk 开发
5.用NDK来编译程序 1. 现在我们用安装好的NDK来编译一个简单的程序吧,我们选择ndk自带的例子hello-jni,我的位于E:/android-ndk-r5/samples/hello-jn ...
- 使用HTML5画柱状图
柱状图在很多应用中都比较常见,例如投票结果的统计分析,企业销售数据的统计分析等等. 需求分析: 一个柱状图一般包含以下几部分: 1.标题 2.横坐标(含标题) 3.竖坐标 (含标题.刻度 ...
- nginx配置location总结
location匹配顺序 "="前缀指令匹配,如果匹配成功,则停止其他匹配 普通字符串指令匹配,顺序是从长到短,匹配成功的location如果使用^~,则停止其他匹配(正则匹配) ...
- maven依赖信息获取
1.mvn dependency:analyze 首先是"Used declared dependencies found",指项目中使用到,但是没有显示声明的依赖,如果有的话,需 ...
- python中的归并排序
本来在博客上看到用python写的归并排序的程序,然后自己跟着他写了一下,结果发现是错的,不得不自己操作.而自己对python不是非常了解所以就变百度边写,最终在花了半个小时之后就写好了. def m ...
- scala的一些特殊用法
1.创建多行字符串,只要把多行字符串放在3个双引号间("""...""")即可.这是Scala对于here document,或者叫here ...