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线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 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
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
javascript比较文档位置
2008/04/08 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
vue 组件简介
2020/07/31 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python中的多线程实例教程
2014/08/27 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
机械专业应届生求职信
2013/12/12 职场文书
大学秋游活动方案
2014/02/11 职场文书
作文评语大全
2014/04/23 职场文书
小学生环保倡议书
2014/05/15 职场文书
诉前财产保全担保书
2014/05/20 职场文书
火灾现场处置方案
2014/05/28 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers