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实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 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把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
用 JSON 处理缓存
2007/04/27 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python创建字典的八种方式
2019/02/27 Python
python批量下载抖音视频
2019/06/17 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Python如何使用函数做字典的值
2019/11/30 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
python中yield的用法详解
2021/01/13 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
消防安全管理制度
2014/02/01 职场文书
党员承诺书内容
2014/03/26 职场文书
文明之星事迹材料
2014/05/09 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers