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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
JS获取父节点方法
2009/08/20 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
python检测服务器是否正常
2014/02/16 Python
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
详解Python3 基本数据类型
2019/04/19 Python
Python实现FLV视频拼接功能
2020/01/21 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
半年思想汇报
2013/12/30 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书