js绘制一条直线并旋转45度
更新时间：2020年08月21日 09:08:47 作者：yangying_0220
这篇文章主要为大家详细介绍了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>
效果图如下显示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
js 正则验证密码强度(包含数字+特殊字符+英文字母大小写)
密码验证是常见的网站注册方法，本文主要介绍了js 正则验证密码强度(包含数字+特殊字符+英文字母大小写)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
本文是小编给大家特意整理的关于js数组方法的知识，非常实用，在面试笔试题中经常用得到，有需要的朋友可以参考下2016-07-07
这篇文章主要介绍了JS解析url参数为json对象问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
看了很多介绍javascript面向对象技术的文章,很晕.为什么?不是因为写得不好,而是因为太深奥.2009-12-12
这篇文章主要介绍了JS关于for循环中使用setTimeout的四种解决方案，想深入了解JS的同学，一定要看下2021-05-05
本篇文章主要介绍了JavaScript自定义文本框光标的方法实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家介绍了解决前后端交互数据出现精度丢失的多种方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
本文为大家讲解下JS的千分位算法的具体实现，先去除空格,判断是否空值和非数；针对是否有小数点，分情况处理；感兴趣的朋友可以参考下2013-07-07
这篇文章主要为大家详细介绍了Bootstrap学习笔记之js组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要为大家介绍了Web Components入门教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论