js绘制一条直线并旋转45度_JavaScript

js绘制一条直线并旋转45度

2021-08-27 16:05yangying_0220 JavaScript

这篇文章主要为大家详细介绍了js绘制一条直线并旋转45度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js绘制一条直线并旋转45度的具体代码，供大家参考，具体内容如下

绘制一条直线，并旋转45度

html 页面

				?

									<canvas id="canvas" width="300" height="300"

									  style="background-color: orange;"></canvas>

js页面

				?

									<script>

									    var canvas = document.getElementById("canvas");

									    var cxt = canvas.getContext('2d');

									    cxt.lineWidth = 5;

									    cxt.beginPath();

									    cxt.moveTo(20, 20);

									    cxt.lineTo(180, 20)

									    cxt.stroke();

									    cxt.closePath();

									    //设置异次元空间

									    cxt.save();

									    //异次元空间 重置原点,默认是画布的(0,0)点

									    cxt.translate(20, 20);

									    //设置旋转角度 参数时弧度 角度0--360 弧度=角度*Math.PI/180

									    cxt.rotate(-30 * Math.PI / 180);

									    //旋转一个线段

									    cxt.lineWidth = 5;

									    cxt.beginPath();

									    cxt.moveTo(0, 0);

									    cxt.lineTo(20, 180);

									    cxt.stroke();

									    cxt.closePath();

									    //将旋转之后的元素返回原画布

									    cxt.restore();

									</script>