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

2020-04-24 18:49:42易采站长站整理

        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复制内容到剪贴板

var sum;      
sum = 3+2;   
alert(sum);   
  
sum=7+8 ;   
alert(sum);    
  
….  //不停重复两行代码   
  

如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省去重复输入大量代码的麻烦。