<!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>

canvas做的一个写字板的更多相关文章

  1. H5 canvas pc 端米字格 写字板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. html5之canvas画图 1.写字板功能

     写字板事例:       写字板分析:1.点击鼠标開始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件):       代 ...

  3. canvas h5制作写字板

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <script type ...

  4. 一起来学习Android自定义控件2-简单的写字板控件

    概述 上一篇文章我们对自定义控件进行了一个大体的知识介绍.今天就来学习自定义一个简单的写字板控件. 先来看看效果图 就是简单的根据手指写下的轨迹去画出内容 实现 在上一篇文章里提到了android官方 ...

  5. Android自己定义控件2-简单的写字板控件

    概述 上一篇文章我们对自己定义控件进行了一个大体的知识介绍. 今天就来学习自己定义一个简单的写字板控件. 先来看看效果图 就是简单的依据手指写下的轨迹去画出内容 实现 在上一篇文章里提到了androi ...

  6. 做为一个前端工程师，是往node方面转，还是往HTML5方面转

    文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...

  7. WPF学习之路（五） 实例：写字板

    写字板实例一 MainWindow.xaml <Window x:Class="Wordpad01.MainWindow" xmlns="http://schema ...

  8. 用 canvas 做个好玩的网站背景

    不知不觉又好久没更过博客了,老调新弹一下,之前做的一个小效果,觉得蛮有意思的,也有朋友问是怎么做的,就分享一下,写个博文吧. 先上demo吧:http://whxaxes.github.io/canv ...

  9. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

随机推荐

  1. JQuery 的toggle() 方法如何使用？

    JQuery中的toggle()方法,相当于点一个元素时,重复循环两个函数,而这两个函数可以作为toggle()函数的两个参数传进去,当第一次点击的时候会执行前面的参数,而第二次点击时执行的是后面的参 ...

  2. Don't make me think [读书笔记] [思维导图]

      <Don't make me think>第3版 内容:解析用户心理,在用户模式.扫描设计.导航设计.主页布局.可用性测试,提出了许多的独到观点及建议. 特色:语言轻松.实在.配有许多 ...

  3. 利用CMD 創建新文件的機種方法

    用 CMD 創建新文件 説明一下: 是在Windows的 CMD命令行模式下,或者在PowerShell命令行模式下創建新文件的機種方法. 創建空文件 cd.>a.txt cd.表示改变当前目录 ...

  4. vue列表渲染，以及鼠标点击改变样式的问题

    在实际项目中,我们进场会遇到鼠标点击该表某个DOM元素的样式,在原生的js或者jquery中,我们会比较熟练的实现这个需求,但是在vue中怎么实现呢? 直接操作DOM?NO!NO! 既然我们的项目使用 ...

  5. 洛谷 2434 [SDOI2005]区间

    [题解] 鲜活的大水题... 把区间排个序然后瞎搞就可以了,发现现在区间的左端点比之前区间的最大的右端点还大,那就增加一个答案区间.每次更新目前最大右区间. #include<cstdio> ...

  6. Spring核心技术（一）——IoC容器和Bean简介

    IoC容器和Bean简介 这章包括了Spring框架对于IoC规则的实现.Ioc也同DI(依赖注入).而对象是通过构造函数,工厂方法,或者一些Set方法来定义对象之间的依赖的.容器在创建这些Bean对 ...

  7. redis 指定端口 启动

    由于资源紧张 需要多创建一个redis实例 重新copy一份实例,然后修改redis.conf文件, 找到port 6379 处修改 端口号 6380 通过下面命令启动就好了 src/redis-se ...

  8. Windows Server 2008R2服务器IIS安装步骤

    注意点: 添加ASP.NET ..NET 扩展性.CGI.ISAPI 扩展.ISAPI 筛选器,去掉 目录浏览(因为大多数网站用不到.) 如果需要用到asp则勾选asp,如果需要用shtm需要开启在服 ...

  9. java多线程synchronized volatile解析

    先简单说说原子性:具有原子性的操作被称为原子操作.原子操作在操作完毕之前不会线程调度器中断.即一个操作或者多个操作 要么全部执行并且执行的过程不会被任何因素打断,要么就都不执行.在Java中,对除了l ...

  10. UVALive 6510 Stickers

    Stickers Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Original ...