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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
js不常见操作运算符总结
Nov 20 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
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
jQuery实现的网格线绘制方法
2016/06/20 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
python实现目录树生成示例
2014/03/28 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python 导入数据及作图的实现
2019/12/03 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
十岁生日父母答谢词
2014/01/18 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
python playwright 自动等待和断言详解
2021/11/27 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS