脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js绘制直线并旋转

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>

效果图如下显示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Openlayers实现图形绘制

    Openlayers实现图形绘制

    这篇文章主要为大家详细介绍了Openlayers实现图形绘制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js实现axios限制请求队列

    js实现axios限制请求队列

    本文主要介绍了js实现axios限制请求队列，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • Javascript实现滚动图片新闻的实例代码

    Javascript实现滚动图片新闻的实例代码

    这篇文章主要介绍了Javascript实现滚动图片新闻的实例代码。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • JavaScript统计字符串中每个字符出现次数完整实例

    JavaScript统计字符串中每个字符出现次数完整实例

    这篇文章主要介绍了JavaScript统计字符串中每个字符出现次数的方法,以完整实例形式分析了JavaScript针对字符串中字符的遍历操作相关技巧,需要的朋友可以参考下
    2016-01-01
  • 标准的js无缝滚动效果

    标准的js无缝滚动效果

    这篇文章主要为大家详细介绍了标准的js无缝滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • js密码强度校验

    js密码强度校验

    这篇文章主要介绍了javascript密码强度校验的实现方法，并给出了详细代码，需要的朋友可以参考下
    2015-11-11
  • js实现form自动完成功能

    js实现form自动完成功能

    2008-02-02
  • JS+Canvas绘制抽奖转盘

    JS+Canvas绘制抽奖转盘

    这篇文章主要为大家详细介绍了JS+Canvas绘制抽奖转盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 省市选择的简单实现(基于zepto.js)

    省市选择的简单实现(基于zepto.js)

    下面小编就为大家带来一篇省市选择的简单实现(基于zepto.js)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随想过来看看吧
    2016-06-06
  • Web跨浏览器进程通信(Web跨域)

    Web跨浏览器进程通信(Web跨域)

    Web跨域已是老生常谈的话题，这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现
    2013-04-04

最新评论