一.一般方法绘制矩形(不常用)
<canvas id="canvas" style="500px;height:500px;background:#999">ddafc</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");//获取画布的DOM
var context=canvas.getContext('2d');//设置绘图环境为2d
context.lineWidth=1;
context.strokeStyle="red";
context.moveTo(50,50);
context.lineTo(100,50);
context.lineTo(100,100);
context.lineTo(50,100);
context.lineTo(50,50);//或者context.closePath()
context.stroke();
</script>
lineWidth:矩形的线宽;
strokeStyle:线宽的颜色
moveTo:起点
closePath:将最后一个点与起点连接起来
lineTo:终点
stroke:开始绘制图;
二. 绘制直线
<canvas id="canvas" style="500px;height:500px;background:#999">ddafc</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");//获取画布的DOM
var context=canvas.getContext('2d');//设置绘图环境为2d
context.lineWidth=1;
context.strokeStyle="red";
context.moveTo(50,50);
context.lineTo(100,50);
context.stroke();
</script>
三. 绘制三角形
<canvas id="canvas" style="500px;height:500px;background:#999">ddafc</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");//获取画布的DOM
var context=canvas.getContext('2d');//设置绘图环境为2d
context.lineWidth=1;
context.strokeStyle="red";
context.moveTo(50,50);
context.lineTo(100,50);
context.lineTo(50,50);
context.stroke();
</script>