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 transform 属性来变换背景图的方法
May 07 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 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中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
重命名批处理python脚本
2013/04/05 Python
python sys模块sys.path使用方法示例
2013/12/04 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python设置环境变量的作用整理
2020/02/17 Python
python实现超级马里奥
2020/03/18 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
学生打架检讨书
2014/02/14 职场文书
关于建议书的格式范文
2014/05/20 职场文书
毕业生工作求职信
2014/06/30 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
大学生社会实践感想
2015/08/11 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript