canvas做的一个写字板
<!DOCTYPE html>
<html>
<head>
<title>画板实验</title>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<!-- <script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>-->
<style type="text/css">
</style>
</head>
<body >
<canvas id="myCanvas"></canvas>
<div>
<button onclick="clean();">清 空</button>
<button onclick="save();">生成图片</button>
</div>
<img id='img' alt='请涂鸦……'/>
<textarea id="log"cols="30"rows="5"></textarea>
<script type="text/javascript">
var canvas,board,img;
canvas = document.getElementById('myCanvas');
img= document.getElementById('img');
canvas.height = 300;
canvas.width = 300;
board = canvas.getContext('2d');
var mousePress = false;
var last = null;
function beginDraw(){
mousePress = true;
}
function drawing(event){
event.preventDefault();
if(!mousePress)return;
var xy = pos(event);
if(last!=null){
board.beginPath();
board.moveTo(last.x,last.y);
board.lineTo(xy.x,xy.y);
board.stroke();
}
last = xy;
}
function endDraw(event){
mousePress = false;
event.preventDefault();
last = null;
}
function pos(event){
var x,y;
if(isTouch(event)){
x = event.touches[0].pageX;
y = event.touches[0].pageY;
}else{
x = event.offsetX+event.target.offsetLeft;
y = event.offsetY+event.target.offsetTop;
}
// log('x='+x+' y='+y);
return {x:x,y:y};
}
function log(msg){
var log = document.getElementById('log');
var val = log.value;
log.value = msg+'n'+val;
}
function isTouch(event){
var type = event.type;
if(type.indexOf('touch')>=0){
return true;
}else{
return false;
}
}
function save(){
//base64
var dataUrl = canvas.toDataURL();
// dataUrl = dataUrl.replace("image/png","image/octet-stream");
img.src = dataUrl;
}
function clean(){
board.clearRect(0,0,canvas.width,canvas.height);
}
board.lineWidth = 1;
board.strokeStyle="#0000ff";
canvas.onmousedown = beginDraw;
canvas.onmousemove = drawing;
canvas.onmouseup = endDraw;
canvas.addEventListener('touchstart',beginDraw,false);
canvas.addEventListener('touchmove',drawing,false);
canvas.addEventListener('touchend',endDraw,false);
</script>
[
lim_{x to 0}
]
</body>
</html>
最新文章
- ABP导航源码分析
- CF460D Little Victor and Set (找规律)
- BZOJ3084 : [Algorithmic Engagements 2011]The Shortest Period
- Linux /proc、/dev Principle
- MATLAB简单实现ID3
- python列表推导式详解
- 4D数据介绍
- webform的三级联动
- Find the Celebrity 解答
- Swift编程语言学习2.1——基础运营商(在)
- Eclipse TypeScript 安装
- 201521123108 《Java程序设计》第6周学习总结
- 【BZOJ1798】【AHOI2009】维护序列(线段树)
- Linux中的端口占用问题
- SQL SERVER查询字段在哪个表里
- java项目中Excel文件的导入导出
- Linux服务器重启后MySQL启动失败
- C# 可指定并行度任务调度器
- Problem E: 编写函数:Swap (I) (Append Code)
- [SQLSERVER] 把TransactionLog截断