利用HTML5 Canvas API绘制矩形的超级攻略

2019-01-28 15:19:14王冬梅

按照这个格式,函数实现任意两个数的和应该写成:

JavaScript Code复制内容到剪贴板
  1. function add2(x,y)    {   
  2.    sum = x + y;       document.write(sum);   
  3. }  

x和y则是函数的两个参数,调用函数的时候,我们可通过这两个参数把两个实际的加数传递给函数了。
例如,add2(3,4)会求3+4的和,add2(60,20)则会求出60和20的和。
返回值函数

JavaScript Code复制内容到剪贴板
  1. function add2(x,y)    {   
  2.    sum = x + y;       return sum; //返回函数值,return后面的值叫做返回值。   
  3. }  

这里的return和其他语言中的一样,但是在JS或者AS等弱类型语言中,返回值类型是不需要写到函数声明里的。

至此,我们把JavaScript函数也顺便系统的说了一下。下面回到正题~
我们也可以封装一下我们的矩形,代码如下:

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>    <html lang="zh">   
  2. <head>        <meta charset="UTF-8">   
  3.     <title>封装绘制矩形方法</title>    </head>   
  4. <body>    <div id="canvas-warp">   
  5.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">            你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  6.     </canvas>    </div>   
  7.    <script>   
  8.     window.onload = function(){            var canvas = document.getElementById("canvas");   
  9.         canvas.width = 800;            canvas.height = 600;   
  10.         var context = canvas.getContext("2d");