绘制简单的直线，三角形

一.一般方法绘制矩形（不常用）

<canvas id="canvas" style="width: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="width: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="width: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>

转载于:https://www.cnblogs.com/Litter-Tulip/p/5264370.html