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 圆角效果
Jul 15 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 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中截取字符串支持utf-8
2007/01/18 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
js 获取radio按钮值的实例
2013/08/17 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
django的model操作汇整详解
2019/07/26 Python
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
毕业生求职推荐信
2013/11/04 职场文书
创业计划书撰写原则
2014/01/25 职场文书
霸气队列口号
2014/06/18 职场文书
工商管理本科生求职信
2014/07/13 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
小学数学教学随笔
2015/08/14 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL