html5-Canvas可以在web中绘制各种图形


Posted in HTML / CSS onDecember 26, 2012

在html5中我觉得最重要的就是引入了Canvas,使得我们可以在web中绘制各种图形。给人感觉单在这点上有点模糊我们web和桌面程序的感觉。在html5外web中也有基于xml的绘图如:VML、SVG。而Canvas为基于像素的绘图。Canvas是一个相当于画板的html节点,我们必须以js操作绘图。
如下
<canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas>定义。
我们可以获取canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举:
1:绘制渲染对象,c.getContext("2d"),获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象。
2:绘制方法
clecrRect(left,top,width,height)清除制定矩形区域,
fillRect(left,top,width,height)绘制矩形,并以fillStyle填充。
fillText(text,x,y)绘制文字;
strokeRect(left,top,width,height)绘制矩形,以strokeStyle绘制边界。
beginPath():开启路径的绘制,重置path为初始状态;
closePath():绘制路径path结束,它会绘制一个闭合的区间,添加一条起始位置到当前坐标的闭合曲线;
moveTo(x,y):设置绘图其实坐标。
lineTo(x,y);绘制从当前其实位置到x,y直线。
fill(),stroke(),clip():在完成绘制的最后的填充和边界轮廓,剪辑区域。
arc():绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小;
rect():矩形路径;
drawImage(Imag img):绘制图片;
quadraticCurveTo():二次样条曲线路径,参数两个控制点;
bezierCurveTo():贝塞尔曲线,参数三个控制点;
createImageData,getImageData,putImageData:为Canvas中像素数据。ImageData为记录width、height、和数据 data,其中data为我们色素的记录为
argb,所以数组大小长度为width*height*4,顺序分别为rgba。getImageData为获取矩形区域像素,而putImageData则为设置矩形区域像素;
… and so on!
3:坐标变换
translate(x,y):平移变换,原点移动到坐标(x,y);
rotate(a):旋转变换,旋转a度角;
scale(x,y):伸缩变换;
save(),restore():提供和一个堆栈,保存和恢复绘图状态,save将当前绘图状态压入堆栈,restore出栈,恢复绘图状态;
… and so on!
好了,也晚了。附我的测试代码,:

复制代码
代码如下:

<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas>
<script type="text/javascript">
var width,height,top,left;
width=height=100;
top=left=5;
var x=10;
var y=10;
var c=document.getElementById("myCanvas");
var maxwidth=c.width-5;
var maxheight=c.height-5;
var cxt=c.getContext("2d");
cxt.strokeStyle="#00f";
cxt.strokeRect(0,0,c.width,c.height);
var img=new Image();
img.src="1.gif";
var MyInterval=null;
start();
function Refresh(){
cxt.clearRect(left,top,width,height);
if((left+x)>(maxwidth-width)||left+x<0){
x=-x;
}
if((top+y)>(maxheight-height)||top+y<0){
y=-y;
}
left=left+x;
top=top+y;
cxt.drawImage(img,left,top,width,height);
cxt.font="20pt 宋体";
cxt.fillText("破狼",left,top+25);
}
function start(){
if(MyInterval==null){
MyInterval=setInterval("Refresh()",100);
}
}
function stop(){
if(MyInterval!=null){
clearInterval(MyInterval);
MyInterval=null;
}
}
function InRectangle(x,y,rectx,recty,rwidth,rheight){
return (x>=rectx&&x<=rectx+rwidth)&&(y>=recty&&y<=recty+rheight)
}
c.onmouseover=function(e){
if(InRectangle(e.clientX,e.clientY,left,top,width,height)){
stop();
}
c.onmouseout=function(e){
start();
}
c.onmousemove=function(e){
if(InRectangle(e.clientX,e.clientY,left,top,width,height)){
if(MyInterval!=null){
stop();
}
}else{
start();
}
}
}
</script>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 #HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 #HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 #HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 #HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 #HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 #HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 #HTML / CSS
You might like
php数组一对一替换实现代码
2012/08/31 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
python实现LRU热点缓存及原理
2019/10/29 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
《七颗钻石》教学反思
2014/02/28 职场文书
爱护公物标语
2014/06/24 职场文书
护士找工作求职信
2014/07/02 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
自主招生英文自荐信
2015/03/25 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
植树节新闻稿
2015/07/17 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python