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>

效果图如下显示：

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

赞 (0)

相关推荐

  • 使用three.js 画渐变的直线

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精彩的演示.不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面. http://github.com/mrdoob/three.js/ 我们来看实例吧 <!DOCTYPE html> <html> <head>

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

    本文实例为大家分享了js绘制一条直线并旋转45度的具体代码,供大家参考,具体内容如下 绘制一条直线,并旋转45度 html 页面 <canvas id="canvas" width="300" height="300" style="background-color: orange;"></canvas> js页面 <script> var canvas = document.getElem

  • php绘制一条直线的方法

    本文实例讲述了php绘制一条直线的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <?php //1.创建画布 $im = imagecreatetruecolor(300,200);//新建一个真彩色图像,默认背景是黑色,返回图像标识符.另外还有一个函数 imagecreate 已经不推荐使用. //2.绘制所需要的图像 $red = imagecolorallocate($im,255,0,0);//创建一个颜色,以供使用 imageline($im,30,30,240

  • 基于 D3.js 绘制动态进度条的实例详解

    D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于

  • 微信小游戏之使用three.js 绘制一个旋转的三角形

    three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样.接下来就记录一下在小游戏中绘制一个 旋转的三角形的步骤: 一. 初始化项目 下载微信官方的开发者工具,然后新建项目 appid选择测试号即可,项目路径自行指定 用编辑器打开项目,得到如下目录: 然后除了game.js,game.json, project.config.json全部删除,并把game.js中的内容清空. game.js是

  • p5.js绘制旋转的正方形

    使用p5.js绘制旋转的正方形,供大家参考,具体内容如下 要还原的效果图 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们. 首先建立画布大小,按照比例应该是5:3 function setup() { createCanvas(500, 300); } 设定矩形绘制格式,以及边线粗细 function setup() { createCanvas(500, 300); rectMode(100); strokeWeight(4); } 让我们根据画布坐标先把静态的图形画

  • ichart.js绘制虚线、平均分虚线效果的实现代码

    ichart.js绘制虚线.平均分虚线效果的实现代码 var Data=new Array(); Data[0] = { labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], datasets : [ { name : '优秀率', color:'#1dbcfe', line_width:4, value : [80,75,92,62,0] } ] } Data[1]

  • three.js绘制地球、飞机与轨迹的效果示例

    three.js绘制地球、飞机与轨迹的效果示例

    对于three.js不太熟悉的朋友们可以参考这篇文章,threejs官网:https://threejs.org/ 首先我们来看下要实现的效果 这个缩小后的图片,下面我们来看下近距离的动态效果.. 效果比较简陋,需要后期再处理... 下面进入主题,代码篇.. HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

  • php绘制一条弧线的方法

    本文实例讲述了php绘制一条弧线的方法.分享给大家供大家参考.具体如下: 弧线相当于截取了椭圆的一部分.代码如下: 复制代码 代码如下: <?php //1.创建画布 $im = imagecreatetruecolor(300,200);//新建一个真彩色图像,默认背景是黑色,返回图像标识符.另外还有一个函数 imagecreate 已经不推荐使用. //2.绘制所需要的图像 $red = imagecolorallocate($im,255,0,0);//创建一个颜色,以供使用 imagea

  • JS绘制微信小程序画布时钟

    JS绘制微信小程序画布时钟

    微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟. 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口. 首先来看一下构建这样一个小程序所需要的目录结构 从目录结构就可以看出来这个程序是简单的单层页面,画布渲染在pages下面的index页面上. 其中对程序有实际驱动作用的代码分别在index.js,index.wxml,index.wxss和app.json这几个文件中 Index.js文件里面存放着程序的逻辑层数据,

  • p5.js绘制创意自画像

    p5.js绘制创意自画像

    本文实例为大家分享了p5.js绘制自画像的具体代码,供大家参考,具体内容如下 绘制结果 人物头上的呆毛会一直运动,鼠标出现在画面上时左上角会有一个小猫咪头随着鼠标移动,而且人物的眼睛也会一直看向小猫的方向 代码介绍 整个图全部由贝塞尔曲线,直线和圆组成 贝塞尔曲线的代码结构大概就是 beginShape(); vertex(180,600);//曲线起点 bezierVertex(180,600,300,100,420,600); //第一个控制点坐标,第二个控制点坐标,终点坐标 endShap

随机推荐