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 相关文章推荐
取选中的radio的值
Jan 11 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
Preload基础使用方法详解
Feb 03 Javascript
原生JS实现多条件筛选
Aug 19 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
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
两款万能的php分页类
2015/11/12 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python创建xml文件示例
2017/03/22 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
python对一个数向上取整的实例方法
2020/06/18 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
幼儿园秋游活动方案
2014/01/21 职场文书
法律进机关实施方案
2014/03/12 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
读后感作文评语
2014/12/25 职场文书
2015新教师教学工作总结
2015/07/22 职场文书