canvas画布--绘制矩形

绘制矩形

html

<canvas id="mycan" style="border: 6px solid green;"></canvas>

脚本

<script type="text/javascript">
	var mycan = document.getElementById("mycan");
	mycan.width = 900;
	mycan.height = 900;
	
	var ctx = mycan.getContext("2d");

	//画一个矩形
	ctx.beginPath();
	ctx.rect(300,20,200,200);
	ctx.stroke();
	
	//绘制完成关闭路径
	ctx.closePath();
</script>

效果

	//设置线段宽度
	ctx.lineWidth=10;
	//绘制边框样式
	ctx.strokeStyle = "blue";
	ctx.stroke();

效果