【html5每日练习】canvas画矩形的3个函数

妖狐艹你老母 2022-06-13 11:28 258阅读 0赞

前端时间，听周围的朋友和同学说html5不好学，去论坛还有各大网站看，在国内也没有真正地开始发展。也见到了专业好多哥们儿（不是计算机专业）学了一半就放弃了，我觉得也情有可原吧，终归编程也是需要耐得住寂寞的行业，去学一门语言，你要没有毅力去克服初学这道难关，你确实只能处于入门这个阶段，我不算过来人（相对于在这个行业混了十几年的甚至几十年的人来说），记得有一个所谓的过来人跟我说，编程是一个体力活，这点我同意，在初学的阶段的确是一个体力活，他还说，咱们中国人和国外内些人真的没法比的，他们身体和咱们不一样。。。当时我表示很无语，介于他是我学长的面子上，我就不当面反驳他了，因为中国有太多他这样想法的，所以中国IT行业（不管在软件还是硬件方面）发展的那么慢，或许最近几年貌似有蓬勃发展的趋势吧。我很多同学不要说写代码了，就是看代码，都会头痛，我觉得他当时何必选这个专业呢？虽然我的专业我觉得算自动化类的吧，或许更偏重于硬件类或者电子类，但现在这个年代哪有纯粹的硬件呢？大一时候学的c语言，除了当时对printf和scanf觉得好奇，就再也没拿起VC++过，学了半年的c，分不清VC和C的大有人在，或许大一倾向于理论吧（不觉得他们理论学的很强），介于我这种上课基本不去的人来说，考试也都过了，那些为了点名而去的人怎么就没过呢？我也迷茫了将近一年，因为我更喜欢软件业，或者说更喜欢写程序，所以在团队里（学校几个比较好的哥们组了一个团队）就承担起编程的责任，写单片机程序，8位控制器很快我们就没了兴趣，做几个项目也力不从心了，都想追求点高端的东西，但最后还是怀着“不想做就更应该做好的”想法把项目圆满完成了，这一年是进步最快的一年，也是自己确定方向的一年。说了一大堆没用的，只是今天在实验室看见几个哥们读matlab程序的时候头疼的样子而有的感慨（虽然我也不是很喜欢matlab的代码吧）。

看代码（代码和以上感慨无关）：

<html lang="en-US">
    <canvas id=myCanvas width=200px height=200px></canvas>
    
    <script>
    	var myCanvas = document.getElementById("myCanvas");
    	var context = myCanvas.getContext("2d");
    	
    	context.strokeStyle = "blue";
    	context.fillStyle = "red";
    	context.strokeRect(0,0,200,200);
    	context.fillRect(50,50,100,100);
    	context.clearRect(70,70,60,60);
    	context.strokeRect(80,80,40,40);
    </script>
    </html>

代码很简单，主要是为了说明画矩形的3个函数，strokeRect() fillRect() clearRect(),效果图如下，看到图就会很明了了。内部的参数分别代表起点横坐标、起点纵坐标、矩形宽度、矩形高度。

![1334144106_8151.png][]

[1334144106_8151.png]: https://img-my.csdn.net/uploads/201204/11/1334144106_8151.png