|
|
|
|
移动端

1.6.4 Canvas上的基础图形

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍Canvas上的基础图形。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:48

技术沙龙 | 邀您于8月25日与国美/AWS/转转三位专家共同探讨小程序电商实战

1.6.4 Canvas上的基础图形
 
在做完第一个Canvas程序后大家对它有了一个基本认识,HTML5 Canvas的使用是以强大的绘图、着色和基本二维形状变换为基础的。然而,可供选择的内建形状相对有限,程序员可以通过一组称作路径的线段来绘制出想要的形状。
 
现在大家来学习一下新的内容,在Canvas上绘制一些基本图形。这些图形的绘制基本上都会有相应的API,本案例中不同的图形被分到不同JavaScript文件中,相应的API都在里边有所体现,读者阅读时结合着注释便能够轻松学会。现在大家来看一下这部分的开发过程。
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sampel1_24/Sample1_24.html。
 
  1. 1 <!DOCTYPE HTML> 
  2. <html><head><title>Sample1_24</title> 
  3. <script src="js/modernizr.js"></script> //导入js 文件夹下的modernizr.js 文件 
  4. <script src="js/arc.js"></script> //导入js 文件夹下的arc.js 文件 
  5. <script src="js/bezier.js"></script> //导入js 文件夹下的bezier.js 文件 
  6. <script src="js/line.js"></script> //导入js 文件夹下的line.js 文件 
  7. <script src="js/linejoin.js"></script> //导入js 文件夹下的linejoin.js 文件 
  8. <script src="js/rect.js"></script> //导入js 文件夹下的rect.js 文件 
  9. <script type="text/javascript"> //前面部分导入的为外部JavaScript 文 
  10. //件,这里为内嵌JavaScript 文件 
  11. 10 var context; 
  12. 11 function eventWindowLoaded(){canvasApp();} //封装加载JavaScript 的方法 
  13. 12 function canvasSupport(){ //检测浏览器版本是否支持canvas 
  14. 13 return Modernizr.canvas;} 
  15. 14 function canvasApp(){ //实际上的JavaScript 的入口方法 
  16. 15 if(!canvasSupport()){return;}else{ 
  17. 16 var theCanvas = document.getElementById("canvas"); 
  18. 17 context=theCanvas.getContext("2d");} 
  19. 18 drawScreen(); //绘制场景,不同的图形有不同的绘制方法,这里省略了其余的方法 
  20. 19 function drawScreen(){ //绘制2D 图形的方法 
  21. 20 //画布背景色为白色不利于辨识,填充一个有颜色的区域便于标示 
  22. 21 context.fillStyle="#aaaaaa"; //设置背景样式 
  23. 22 context.fillRect(0,0,500,500); //创建一个矩形 
  24. 23 context.fillStyle='#000000'; //文字 
  25. 24 context.font='20px _sans'; //文字的大小和字号 
  26. 25 context.textBaseline='top'; //设置文本垂直对齐方式 
  27. 26 context.fillText("Canvas!",0,0);}} //将测试文本显示到屏幕上 
  28. 27 </script></head> 
  29. 28 <body onload="eventWindowLoaded();"> 
  30. 29 <div style="position: absolute; top: 50px;left:50px;"> 
  31. 30 <canvas id="canvas" width="500" height="500"> 
  32. 31 若看到这些文字,说明浏览器不支持WebGL!</canvas></div> 
  33. 32 </body></html> 
第2~8行引入了各图形的JavaScript文件,每个图形的绘制方法都封装在了不同的文件中,这里只在绘制时调用不同的绘制方法即可,读者在测试本案例时只需将drawScreen()方法替换掉便能测试不同图形的绘制了。
 
第9~26行为内嵌的JavaScript脚本,这部分是Canvas程序的入口,其中得到了Canvas的id,通过context来设置一些属性。并且将绘图区域清屏并设置了一个与画布等大的矩形,用于显示出来Canvas画布。
 
第28~32行为创建Canvas的过程,具体作用在前面几小节中都分别介绍了,onload在页面加载完毕后调用JavaScript脚本,Canvas设置好其3个属性。
 
在程序中调用drawScreen()方法时需要注意的是在程序开头导入的几个JavaScript文件,这几个文件包含着绘制圆、直线、曲线的一些图形的API,读者可以自行查阅这些代码进行学习,其中的解释和注意事项在注释中都有详细介绍,这里便不再赘述。
 
HTML5 Canvas的知识便介绍完毕,但是读者千万别以为就已经掌握了Canvas。Canvas是HTML5新增的元素,其可以干的事情有很多,本章只是介绍了一下2D环境下的绘制图形,以后的章节才会介绍真正的Canvas的应用。
 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Windows编程启示录

主要内容: ● 如何设计像自动售货机那样有效的用户界面。 ● 深入理解窗口和对话框的管理机制。 ● 为什么性能优化与我们在直觉上的理...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊