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有时候会 ...
随机推荐
- Flex4+spring+hibernate+BlazeDS整合案例
http://wenku.baidu.com/link?url=7v5xAyD2nvChQRT60QewpvAASFHMZNvD0OxX11OASYvae8jbVNsr5I000TwwYOlChzq0 ...
- C#流水号生成汇总(四)
简单高效的ID生成方式 http://www.ikende.com/blog/6014522c24ff4ef89cfb430f9c5a8489 一个简单唯一ID生成规则 http://www.iken ...
- panic: reflect.Value.Interface: cannot return value obtained from unexported field or method
go的结构体中私有的属性, 即使反射也获取不到
- MVC路由之浅见
1.定义路由.路由规则 public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{re ...
- python笔记26-命令行传参sys.argv实际运用
前言 平常我们在用别人写好的python包的时候,在cmd输入xx -h就能查看到帮助信息,输入xx -p 8080就能把参数传入程序里,看起来非常酷. 本篇就来讲下如何在python代码里加入命令行 ...
- word排版汇总
1.iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf 的文档,而且可以将XML.Html文件转化为PDF ...
- LODOP打印控件之LODOP.NewPageA()方法
通过lodop的强制分页方法,当我们一次性需要打印多张单页面的时候,可以通过该方法实现一次性打出,而不是重复调用打印方法,容易出问题 LODOP.NewPageA(); 说明:强制分页,注意是.New ...
- 深度学习阅读列表 Deep Learning Reading List
Reading List List of reading lists and survey papers: Books Deep Learning, Yoshua Bengio, Ian Goodfe ...
- iOS:多个单元格的删除(方法一)
采用存取indexPath的方式,来对多个选中的单元格进行删除 删除前: 删除后: 分析:如何实现删除多个单元格呢?这需要用到UITableView的代理方法,即选中单元格时对单元格做的处理,同时我们 ...
- IIS HTTP 错误 404.17 - Not Found 解决方法
错误提示如下图: 出现这种情况的原因通常是因为先安装了Framework,后安装的IIS: 运行cmd,输入: C:\Windows\Microsoft.NET\Framework\V4.0.30 ...