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有时候会 ...
随机推荐
- 能够区分光驱的类型么？比如CDROM、DVD还是CD-RW
http://www.jubao163.com/it/bianchengwendang/2007-06-17/14948.shtml typedef struct _SCSI_PASS_THROUGH ...
- 基于nginx实现protobuf RPC
老婆一起来上海工作,每个月消费立马上来了,做了一个android记账应用,把每笔帐都实时记录进去.开始是单机版的,只能两个人分别记,月底再merge一下.刚好有一台阿里云的ECS,于是准备升级为带服务 ...
- c# webBrowser下载图片
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) { ...
- [MAC OS] 常用工具
1.Charles mac下的抓包.代理神器 比如我想本地配置 到我的开发机上面.我可以通过Charles 下Tools -> Map Remote 配置跳转. 2.Postman chrom ...
- coursera课程Text Retrieval and Search Engines之Week 3 Overview
Week 3 OverviewHelp Center Week 3 On this page: Instructional Activities Time Goals and Objectives K ...
- 数学图形之莫比乌斯带(mobius)
莫比乌斯带,又被译作:莫比斯环,梅比斯環或麦比乌斯带.是一种拓扑学结构,它只有一个面(表面),和一个边界.即它的正反两面在同一个曲面上,左右两个边在同一条曲线上.看它的名字很洋气,听它的特征很玄乎,实 ...
- 第四章 CopyOnWriteArraySet源码解析
注:在看这篇文章之前,如果对CopyOnWriteArrayList底层不清楚的话,建议先去看看CopyOnWriteArrayList源码解析. http://www.cnblogs.com/jav ...
- UNIX 域套接字——UNIX domain socket
/*********************程序相关信息********************* * 程序编号:015 * 程序编写起始日期:2013.11.30 * 程序编写完成日期:2013.1 ...
- 敏捷开发方法XP的12个最佳实践
极限编程(eXtreme Programming,简称XP)是一种轻量级.高效.低风险.柔性.可预测的.科学的软件开发方法,其特性包含在12个最佳实践中. 1. 计划游戏 ( Planning Ga ...
- oracle connect nocycle
select * from uc_staff_department_level t,uc_t_staff stwhere st.id=t.staff_idand t.department_id in ...