浅谈如何使用HTML5的Canvas绘图
在HTML5中最重要的就是引入了Canvas,使得我们可以在WEB中绘制各种图形,这有点模糊了WEB应用和桌面程序的感觉。在HTML5之外,WEB也有基于xml的绘图,如:VML、SVG,而Canvas是基于像素的绘图,Canvas是一个相当于画板的HTML节点,我们必须以JavaScript操作绘图。
操作方式如下:
1、绘制渲染对象,c.getContext(“2d”),获取2D绘图对象,无论我们调用多少次获取的对象都将是相同的对象。
2、绘制方法:
clearRect(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则为设置矩形区域像素。
3、坐标变换:
translate(x,y)——平移变换,原点移动到坐标(x,y);
rotate(a)——旋转变换,旋转a度角;
scale(x,y)——伸缩变换;
save(),restore()——提供一个堆栈,保存和恢复绘图状态,save将当前绘图状态压入堆栈,restore出栈,恢复绘图状态;
测试代码:
- <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>
【浅谈如何使用HTML5的Canvas绘图】相关文章
5. 如何使用 HTML5 的 Notification API
8. 如何使用jQuery或者javascript处理Cookie?
9. 如何使用javascript/jQuery预先加载图片
本文来源:https://www.51html5.com/a2349.html
﹝浅谈如何使用HTML5的Canvas绘图﹞相关内容
- 如何使用jQuery加载js脚本
- 使用 HTML5 canvas 进行 Web 绘图
- 用Canvas绘制贝赛尔曲线
- 利用HTML 5和JavaScript创建绘图应用
- 如何用HTML5 Canvas制作子画面动画
- 浅谈HTML5的本地存储特性
- 在HTML5的CANVAS上绘制椭圆的几种方法
- 基于HTML5的Canvas指纹跟踪技术
- Zrender——轻量级Canvas类库,让绘图大不同!
- 使用HTML5画布(canvas)生成阴影效果