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动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
vue路由跳转传递参数的方式总结
May 10 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
JS简单计算器实例
2015/01/20 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
VueJS实现用户管理系统
2020/05/29 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
简单使用Python自动生成文章
2014/12/25 Python
python协程用法实例分析
2015/06/04 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python学习之os模块及用法
2020/06/03 Python
Django实现随机图形验证码的示例
2020/10/15 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
大学生思想汇报范文
2013/12/31 职场文书
项目投资建议书
2014/05/16 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年测量员工作总结
2014/12/12 职场文书
家长给老师的感谢信
2015/01/20 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
vue判断按钮是否可以点击
2022/04/09 Vue.js