<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{margin:0;padding:0;}
.out{
width: 800px;
margin: 50px auto;
position: relative;
}
.out p{
font-size: 24px;
color: red;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
.out button{
color: green;
font-style: 18px;
cursor: pointer;
position: absolute;
top: 20px;
right: 5%;
border: none;
background: none;
outline: none;
border: 1px solid green;
padding: 2px 4px;
border-radius: 2px;
}
#cvs1{
background: #eee;
cursor: pointer;
}
</style>
</head>
<body>
<div class="out">
<p>写写看...</p>
<button>清除</button>
<canvas id="cvs1" width="800" height="800"></canvas>
</div>
<script>
var cvs=document.getElementById('cvs1'),
ctx=cvs.getContext('2d'),
l=cvs.getBoundingClientRect().left,
t=cvs.getBoundingClientRect().top;

ctx.beginPath();
ctx.fillStyle="#eee";
ctx.fillRect(0,0,800,800);
ctx.closePath();

cvs.onmousedown=function(ev){
var ev=ev||window.event,
x=ev.clientX-l,
y=ev.clientY-t;

ctx.beginPath();
ctx.moveTo(x,y);

document.onmousemove=function(ev){
var ev=ev||window.event,
dx=ev.clientX-l;
dy=ev.clientY-t;

ctx.lineTo(dx,dy);
ctx.strokeStyle='red';
ctx.lineWidth=4;
ctx.stroke();
return false;
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null;
ctx.closePath();
}
return false;
}

document.getElementsByTagName('button')[0].onclick=function(){
ctx.clearRect(0,0,800,800);
}
</script>
</body>
</html>

canvas画布，写字板的更多相关文章

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

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

  2. canvas h5制作写字板

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

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

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

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

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

  5. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  6. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

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

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

  8. 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）

    1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...

  9. 关于使用Css设置Canvas画布大小的问题

    问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

  10. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

随机推荐

  1. Selenium_IDE的基本使用及脚本解析

    Selenium确实还是很强大的.根据我以往的经验,这个东西在web测试里的作用还是相当大的.经过近期研究,暂时对基本运作方式有了一定了 解,依旧找个实例记录一下.本段脚本实现的是网易返现个人中心登录 ...

  2. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  3. Linux限制cpu睿频&限制频率

    .关闭睿频 > /sys/devices/system/cpu/intel_pstate/no_turbo .限制CPU最大频率到50% " | sudo tee /sys/devic ...

  4. springmvc+mybatis 处理时间

    项目结构: 一.数据库中time的字段为datetime1. 数据库设计如图 2. addNews.jsp <%@ page language="java" contentT ...

  5. BZOJ5297 CQOI2018社交网络（矩阵树定理）

    板子题. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> # ...

  6. 在java中为什么要把main方法定义为一个static方法？

    我们知道,在C/C++当中,这个main方法并不是属于某一个类的,它是一个全局的方法,所以当我们执行的时候,c++编译器很容易的就能找到这个main方法,然而当我们执行一个java程序的时候,因为ja ...

  7. 【刷题】洛谷 P3872 [TJOI2010]电影迷

    题目描述 小A是一个电影迷,他收集了上百部的电影,打算从中挑出若干部在假期看完.他根据自己的口味和网上的介绍,对每部电影X都打了一个分数vX,表示自己喜欢的程度.这个分数的范围在-1000至1000之 ...

  8. Android指纹识别API讲解，让你有更好的用户体验

    我发现了一个比较怪的现象.在iPhone上使用十分普遍的指纹认证功能,在Android手机上却鲜有APP使用,我简单观察了一下,发现Android手机上基本上只有支付宝.微信和极少APP支持指纹认证功 ...

  9. 【ZJOI 2018】 历史（lct）

    历史 题目描述 九条可怜是一个热爱阅读的女孩子. 这个世界有 $n$ 个城市,这 $n$ 个城市被恰好 $n-1$ 条双向道路联通,即任意两个城市都可以互相到达.同时城市 $1$ 坐落在世界的中心,占 ...

  10. 20135239 益西拉姆 linux内核分析 读书笔记之第四章

    chapter 4 进程调度 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统. 多任务系统可以划分为两类: - 非抢占式多任务: - 进程会一直执行直到自己主动停止运行(这一 ...