html5-Canvas绘图

简介:
+关注继续查看

在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!

好了,也晚了。附我的测试代码,:


  1. View Code   
  2.  
  3. <html>   
  4. <head>   
  5. </head>   
  6. <body>   
  7. <canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas>   
  8. <script type="text/javascript">   
  9.  
  10. var width,height,top,left;   
  11. width=height=100;   
  12. top=left=5;   
  13. var x=10;   
  14. var y=10;   
  15.  
  16. var c=document.getElementById("myCanvas");   
  17.  
  18. var maxwidth=c.width-5;   
  19. var maxheight=c.height-5;   
  20. var cxt=c.getContext("2d");   
  21. cxt.strokeStyle="#00f";   
  22. cxt.strokeRect(0,0,c.width,c.height);   
  23.  
  24. var img=new Image();   
  25. img.src="1.gif";   
  26. var MyInterval=null;   
  27. start();   
  28. function Refresh(){   
  29. cxt.clearRect(left,top,width,height);   
  30. if((left+x)>(maxwidth-width)||left+x<0){   
  31. x=-x;   
  32. }   
  33.  
  34. if((top+y)>(maxheight-height)||top+y<0){   
  35. y=-y;   
  36. }   
  37.  
  38. left=left+x;      
  39. top=top+y;   
  40. cxt.drawImage(img,left,top,width,height);   
  41. cxt.font="20pt 宋体";   
  42. cxt.fillText("破狼",left,top+25);   
  43.  
  44. }   
  45.  
  46. function start(){   
  47. if(MyInterval==null){   
  48. MyInterval=setInterval("Refresh()",100);   
  49. }   
  50. }   
  51.  
  52. function stop(){   
  53. if(MyInterval!=null){   
  54. clearInterval(MyInterval);   
  55. MyInterval=null;   
  56. }   
  57. }   
  58. function InRectangle(x,y,rectx,recty,rwidth,rheight){   
  59. return (x>=rectx&&x<=rectx+rwidth)&&(y>=recty&&y<=recty+rheight)   
  60. }   
  61. c.onmouseover=function(e){   
  62. if(InRectangle(e.clientX,e.clientY,left,top,width,height)){   
  63. stop();   
  64. }   
  65.  
  66. c.onmouseout=function(e){   
  67. start();   
  68. }   
  69.  
  70. c.onmousemove=function(e){   
  71. if(InRectangle(e.clientX,e.clientY,left,top,width,height)){   
  72. if(MyInterval!=null){   
  73. stop();   
  74. }   
  75. }else{   
  76. start();   
  77. }   
  78. }   
  79.  
  80. }   
  81. </script>   
  82. </body>   
  83. </html>  
  84. 复制代码 

参考火狐html文档:https://developer.mozilla.org/en/HTML/HTML5

     我的html5系列:1.html5声频audio和视频video

2.html5-Canvas绘图

3.html5之Canvas坐标变换应用-时钟实例

4.html5-web本地存储在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!

好了,也晚了。附我的测试代码,:


  1. View Code   
  2.  
  3. <html>   
  4. <head>   
  5. </head>   
  6. <body>   
  7. <canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas>   
  8. <script type="text/javascript">   
  9.  
  10. var width,height,top,left;   
  11. width=height=100;   
  12. top=left=5;   
  13. var x=10;   
  14. var y=10;   
  15.  
  16. var c=document.getElementById("myCanvas");   
  17.  
  18. var maxwidth=c.width-5;   
  19. var maxheight=c.height-5;   
  20. var cxt=c.getContext("2d");   
  21. cxt.strokeStyle="#00f";   
  22. cxt.strokeRect(0,0,c.width,c.height);   
  23.  
  24. var img=new Image();   
  25. img.src="1.gif";   
  26. var MyInterval=null;   
  27. start();   
  28. function Refresh(){   
  29. cxt.clearRect(left,top,width,height);   
  30. if((left+x)>(maxwidth-width)||left+x<0){   
  31. x=-x;   
  32. }   
  33.  
  34. if((top+y)>(maxheight-height)||top+y<0){   
  35. y=-y;   
  36. }   
  37.  
  38. left=left+x;      
  39. top=top+y;   
  40. cxt.drawImage(img,left,top,width,height);   
  41. cxt.font="20pt 宋体";   
  42. cxt.fillText("破狼",left,top+25);   
  43.  
  44. }   
  45.  
  46. function start(){   
  47. if(MyInterval==null){   
  48. MyInterval=setInterval("Refresh()",100);   
  49. }   
  50. }   
  51.  
  52. function stop(){   
  53. if(MyInterval!=null){   
  54. clearInterval(MyInterval);   
  55. MyInterval=null;   
  56. }   
  57. }   
  58. function InRectangle(x,y,rectx,recty,rwidth,rheight){   
  59. return (x>=rectx&&x<=rectx+rwidth)&&(y>=recty&&y<=recty+rheight)   
  60. }   
  61. c.onmouseover=function(e){   
  62. if(InRectangle(e.clientX,e.clientY,left,top,width,height)){   
  63. stop();   
  64. }   
  65.  
  66. c.onmouseout=function(e){   
  67. start();   
  68. }   
  69.  
  70. c.onmousemove=function(e){   
  71. if(InRectangle(e.clientX,e.clientY,left,top,width,height)){   
  72. if(MyInterval!=null){   
  73. stop();   
  74. }   
  75. }else{   
  76. start();   
  77. }   
  78. }   
  79.  
  80. }   
  81. </script>   
  82. </body>   
  83. </html>  
  84. 复制代码 

参考火狐html文档:https://developer.mozilla.org/en/HTML/HTML5

     我的html5系列:1.html5声频audio和视频video

2.html5-Canvas绘图

3.html5之Canvas坐标变换应用-时钟实例

4.html5-web本地存储





 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/835243,如需转载请自行联系原作者


相关文章
|
2月前
|
前端开发 容器
Html利用Canvas绘制图形
Html利用Canvas绘制图形
36 0
|
2月前
|
移动开发 前端开发 JavaScript
Html5 Canvas绘图实例
Html5 Canvas绘图实例
32 0
|
3月前
|
移动开发 前端开发 JavaScript
HTML5 —— 初识 Canvas 画布
HTML5 —— 初识 Canvas 画布
|
8月前
|
移动开发 前端开发 HTML5
HTML5的学习之canvas画布(五)
HTML5的学习之canvas画布 canvas其他剩余的方法和属性。 转换 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 translate() 重新映射画布上的 (0,0) 位置。 transform() 替换绘图的当前转换矩阵。 setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。 图像绘制 方法 描述 drawImage() 向画布上绘制图像、画布或视频。 createImageData() 创建新的、空白的 ImageData 对象。 getImageData() 返回 ImageData 对象,
|
8月前
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(四)
HTML5的学习之canvas画布 这篇博客继续学习canvas的文字相关属性和方法。 属性 属性 描述 font 设置或返回文本内容的当前字体属性。 textAlign 设置或返回文本内容的当前对齐方式。 textBaseline 设置或返回在绘制文本时使用的当前文本基线。 方法 方法 描述 fillText() 在画布上绘制&quot;被填充的&quot;文本。 strokeText() 在画布上绘制文本(无填充)。 measureText() 返回包含指定文本宽度的对象。 使用canvas绘制艺术字 HTML代码: &lt;canvas id=&quot;my_canvas&quot;&
|
8月前
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(三)
HTML5的学习之canvas画布 上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。 1.矩形 方法 描述 rect() 创建矩形。 fillRect() 绘制&quot;被填充&quot;的矩形。 strokeRect() 绘制矩形(无填充)。 clearRect() 在给定的矩形内清除指定的像素。 2.圆形 方法 描述 arc() 创建弧/曲线(用于创建圆形或部分圆)。 arcTo() 创建两切线之间的弧/曲线。 ellipse() 创建椭圆。 3.路径 方法 描述 fill() 填充当前绘图(路径)。 stroke() 绘制已定
|
8月前
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(二)
HTML5的学习之canvas画布 这篇文章我么继续学习canvas画布。学习学习canvas画布线条的颜色,渐变,阴影等属性和方法。 属性 1.颜色属性 属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。 strokeStyle 设置或返回用于笔触的颜色、渐变或模式。 2.阴影属性 属性 描述 shadowColor 设置或返回用于阴影的颜色。 shadowBlur 设置或返回用于阴影的模糊级别。 shadowOffsetX 设置或返回阴影与形状的水平距离。 shadowOffsetY 设置或返回阴影与形状的垂直距离。 3.线条样式属性 属性 描述 lineC
|
8月前
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(一)
HTML5的学习之canvas画布 前面几篇博客我们一直在讲如何使用canvas绘制一下图片,但是没有讲过canvas如何使用,都有哪些属性,方法等。今天我们就来讲一讲canvas的有关属性和方法。 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。 接下来我们来学习一下这个对象的属性和方法,用于在画布上绘制文本、线条、矩形、圆形等等。 HTML代码: &lt;
|
前端开发
html:canvas画布绘图简单入门-1
html:canvas画布绘图简单入门-1
html:canvas画布绘图简单入门-1
|
Web App开发 移动开发 JavaScript
相关产品
云迁移中心
推荐文章
更多