canvas画线

index.html

<!DOCTYPE HTML>
<html>
<style type="text/css">
#myCanvas {border: 1px solid #BEBEBE;}
</style>
<body>
    <canvas id="myCanvas" width="800" height="600">你的浏览器不支持 HTML5</canvas>
    <script src="index.js"></script>
</body>

</html>

Javascript:

(function(){ // 闭包，防止变量、方法重复
	var canvasDom = document.getElementById("myCanvas");
	var context = canvasDom.getContext("2d"); // 获取绘制功能的对象（context：上下文）
	
	drawLineRect(10, 10, 300, 200, 10, 'rgba(0, 0, 0, 0.5)');
	drawLineRect(25, 25, 270, 170, 10, 'blue');
	drawLineRect(40, 40, 240, 140, 10, '#00DB00');
	/**
	 * [drawLineRect 画矩形]
	 * @param  {[type]} x         [起点位置x坐标]
	 * @param  {[type]} y         [起点位置y坐标]
	 * @param  {[type]} width     [矩形宽度]
	 * @param  {[type]} height    [矩形高度]
	 * @param  {[type]} lineWidth [线条宽度]
	 * @param  {[type]} color     [线条颜色]
	 * @return {[type]}           [无]
	 */
	function drawLineRect(x, y, width, height, lineWidth, color) {
		context.beginPath(); // 开始路径，如果没有这个和结束路径包围，所有线条都是最后那根线条的样式了
		context.moveTo(x, y); // 开始位置
		context.lineTo(x+width, y); // 画到此处
		context.lineTo(x+width, y+height); // 画到此处
		context.lineTo(x, y+height); // 画到此处
		context.lineTo(x, y); // 画到此处
		context.lineTo(x+width, y); // 画到此处--这句很重要，设置宽度为10，没有这句，起点有缺口
		context.lineWidth = lineWidth;
		context.strokeStyle = color;
		context.closePath(); // 结束路径，应与开始路径呼应(会不会导致内存泄露跟实现有关系)
		context.stroke();
	}
})();

猜你喜欢