HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 浅谈如何使用HTML5的Canvas绘图

浅谈如何使用HTML5的Canvas绘图

HTML5资讯  手机阅读


在HTML5中最重要的就是引入了Canvas,使得我们可以在WEB中绘制各种图形,这有点模糊了WEB应用和桌面程序的感觉。在HTML5之外,WEB也有基于xml的绘图,如:VML、SVG,而Canvas是基于像素的绘图,Canvas是一个相当于画板的HTML节点,我们必须以JavaScript操作绘图。


操作方式如下:


我们可以获取Canvas对象为var c=document.getElementById(“myCanvas”);其应有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出栈,恢复绘图状态;


测试代码:

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

【浅谈如何使用HTML5的Canvas绘图】相关文章

1. 浅谈如何使用HTML5的Canvas绘图

2. HTML Canvas绘图使用详解

3. HTML5开发之Canvas绘图之实战入门

4. 移动中间件2.0时代,企业如何使用HTML5

5. 如何使用 HTML5 的 Notification API

6. 如何使用details元素和summary元素

7. 如何使用CSS生成一个三角形?

8. 如何使用jQuery或者javascript处理Cookie?

9. 如何使用javascript/jQuery预先加载图片

10. 如何使用jquery插件截取图片颜色调

本文来源:https://www.51html5.com/a2349.html

点击展开全部
上一篇:国内首个HTML5移动应用开发平台AppCan今日公测 下一篇:SOSO地图触屏版灰度发布:HTML5开发跨平台

﹝浅谈如何使用HTML5的Canvas绘图﹞相关内容

「浅谈如何使用HTML5的Canvas绘图」相关专题

html5 canvas
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

学习教程 HTML5开发工具 HTML5网站 HTML5游戏 HTML5资讯

也许您还喜欢