<!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. XMind2TestCase：一个高效测试用例设计的解决方案！

    一.背景 软件测试过程中,最重要.最核心就是测试用例的设计,也是测试童鞋.测试团队日常投入最多时间的工作内容之一. 然而,传统的测试用例设计过程有很多痛点: 1.使用Excel表格进行测试用例设计,虽 ...

  2. [转帖]高通推出八核笔电处理器骁龙8cx 能超英特尔吗？

    高通推出八核笔电处理器骁龙8cx 能超英特尔吗? https://baijiahao.baidu.com/s?id=1619154699684981202&wfr=spider&for ...

  3. JS 把数组按倒序排列

    var achearr=[1,2,3,4]; var bchearr=[]; //方法1: for (var i = 0; i <=achearr.length;i++) { bchearr.p ...

  4. IE显示对象不支持此属性或方法 的解决方法

    用C# 编写的ActiveX控件, 调试时,在世界之窗浏览器里能正确显示,但是不能和JS交互,也没有传说中的错误信息框出现,查了很多文档,后来想问题是不是出在浏览器上,换在IE8里调试,点击交互按钮, ...

  5. URL query string中文字符问题

    如果URL的query string中包含中文字符,在不做特殊处理的情况下通过 request.getParameter 方法是获取不到正确的信息的,这是由于下面的两个机制造成的 浏览器会自动对URL ...

  6. 把打印的内容保存成文件(PDF)

    有时候网页的内容和打印的内容会有一些差异,需要把打印的内容倒出来.是有办法的. 1.以谷歌为内核的浏览器示例,按Ctrl+p快捷键打开打印对话框,如图: 2.点击更改按钮,更改打印机,会出现选择目标打 ...

  7. iOS BCD码、数据流、字节和MD5计算

    一.各个之间的相互转换 1.字符串转数据流NSData NSString *str = @"abc123"; NSData *dd = [str dataUsingEncoding ...

  8. java链表的各种操作

    java里面没有指针的说法,所以初始化的时候,就是新建一个null节点就是一个空链表了.//C里面链表会有头指针,头指针指向头节点 如果想向空链表插入第一个节点,直接head=newNode: 注意的 ...

  9. Leetcode模拟题篇

    43. Multiply Strings 高精度非负整数的乘法. string multiply(string num1, string num2) { '); ; <= i; --i) { ; ...

  10. javascript循环事件只响应最后一次的问题处理

    在所有的面向对象编程语言中,只要涉及到逻辑的代码,常见的问题都是循环创建很多个对象UI,在循环体中对这些对象添加事件.如果不做处理,和其他地方一样的添加事件,其结果都是只响应最后一次循环之后的结果.原 ...