html5 canvas 使用示例


Posted in HTML / CSS onOctober 22, 2010

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5示例</title>
<style type="text/css">
#container{border:1px solid #ccc;width:800px;height:600px;position:relative;}
canvas{position:absolute;top:0px;left:0px;z-index:1;}
</style>
</head>
<body>
<select id="tools">
<option value="pen">铅笔</option>
<option value="line">直线</option>
<option value="rect">矩形</option>
<option value="circle">圆形</option>
<option value="ellipse">椭圆</option>
</select>
<div id="container">
<canvas id="canvas" width="800" height="600"></canvas>
<canvas id="canvas_temp" style="z-index:2;" width="800" height="600"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var _canvas = document.getElementById('canvas_temp');
var _context = _canvas.getContext('2d');
var tools= document.getElementById('tools');

tools.onchange = function (e){
tool[this.value]();
};
var tool = {
pen:function (){
this.reset();
_canvas.onmousedown=function (e){
_context.moveTo(e.layerX,e.layerY);
_canvas.onmousemove=function (e){
_context.lineTo(e.layerX,e.layerY);
_context.stroke();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
};
},
line:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_canvas.onmousemove=function (e){
_context.clearRect(0,0,canvas.width,canvas.height);
_context.beginPath();
_context.moveTo(_e.layerX,_e.layerY);
_context.lineTo(e.layerX,e.layerY);
_context.stroke();
_context.closePath();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
rect:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_context.strokeStyle="#000";
_canvas.onmousemove=function (e){
_context.clearRect(0,0,canvas.width,canvas.height);
_context.strokeRect(_e.layerX,_e.layerY,e.layerX-_e.layerX,e.layerY-_e.layerY);
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
circle:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_canvas.onmousemove=function (e){
_context.clearRect(0,0,canvas.width,canvas.height);
_context.beginPath();
_context.arc(_e.layerX,_e.layerY,e.layerX-_e.layerX,0,Math.PI*2,true);
_context.stroke();
_context.closePath();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
ellipse:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_canvas.onmousemove=function (e){
var st=0;
_context.clearRect(0,0,canvas.width,canvas.height);
_context.beginPath();
_context.moveTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st), _e.layerY+(e.layerX-_e.layerX)*Math.sin(st));
st+=1/180*Math.PI;
for(var i=0;i<360;i++){
_context.lineTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st),_e.layerY+(e.layerY-_e.layerY)*Math.sin(st));
st+=1/180*Math.PI;
}
_context.stroke();
_context.closePath();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
reset:function (){
_canvas.onmousedown=null;
_canvas.onmouseup=null;
_canvas.onmousemove=null;
},
updata:function (){
context.drawImage(_canvas, 0, 0);
_context.clearRect(0, 0, canvas.width, canvas.height);
}
};
tool['pen']();
</script>
</body>
</html>

HTML / CSS 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
IE9下html5初试小刀
Sep 21 #HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 #HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 #HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 #HTML / CSS
html5 学习简单的拾色器
Sep 03 #HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 #HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 #HTML / CSS
You might like
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
JS批量操作CSS属性详细解析
2013/12/16 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
keras中的History对象用法
2020/06/19 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
C面试题
2015/10/08 面试题
医学生自荐信
2013/12/03 职场文书
霸王洗发水广告词
2014/03/14 职场文书
安全生产宣传标语
2014/06/06 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
大学生暑期实践报告
2015/07/13 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS