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


Posted in Javascript onAugust 21, 2020

本文实例为大家分享了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绘制一条直线并旋转45度

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 #Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 #Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 #Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 #Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 #Javascript
JavaScript 空间坐标的使用
Aug 19 #Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 #Javascript
You might like
神族 Protoss 历史背景
2020/03/14 星际争霸
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
python处理大数字的方法
2015/05/27 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
Django xadmin安装及使用详解
2020/10/26 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
关于VPN
2012/06/10 面试题
党委班子对照检查材料
2014/08/19 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
八年级数学教学反思
2016/02/17 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫