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

2019-01-28 15:19:14王冬梅
  •         context.lineTo(650,50);            context.lineTo(650,550);   
  •         context.lineTo(150,550);            context.lineTo(150,50);     //最后一笔可以不画   
  •         context.closePath();        //使用closePath()闭合图形      
  •         context.fillStyle = "yellow";   //选择油漆桶的颜色            context.lineWidth = 5;   
  •         context.strokeStyle = "black";      
  •         context.fill();                 //确定填充            context.stroke();   
  •        }   
  • </script>    </body>   
  • </html>    </body>   
  • </html>      

    运行结果:
    2016321105516457.jpg (850×500)

    这里需要注意的是一个良好的编码规范。因为之前说过了Canvas是基于状态的绘制,只有调用了stroke()和fill()才确定绘制。所以我们要把这两行代码放在最后,其余的状态设置的代码放在它们之前,将状态设置与确定绘制的代码分隔开。增强代码的可读性。


    封装绘制方法
    大家一定发现了,绘制矩形其实都是这样的四笔,我们每次用这种笨方法画矩形都要画这四笔有多麻烦,如果我们要花10个矩形?100个?1000个?都这样写,代码会臃肿,复用性很低。这里,我们可以使用JavaScript封装这些方法。我们知道,一个矩形可以由它的左上角坐标和其长宽唯一确定。
    JavaScript函数
    这里我们介绍一下JavaScript函数。如果有基础的同学可以跳过这一大段,直接看后面的。
    JavaScript 和 ActionScript 语言的函数声明调用一样,都是编程语言中最简单的。
    函数的作用
    函数的作用,可以写一次代码,然后反复地重用这个代码。如:我们要完成多组数和的功能。

    JavaScript Code复制内容到剪贴板