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>

效果图如下显示:

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

时间: 2020-08-20

使用three.js 画渐变的直线

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

jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m

Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法

本文实例讲述了Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法.分享给大家供大家参考.具体如下: 看看下面的例子和效果吧 # -*- coding: utf-8 -*- from matplotlib.widgets import MultiCursor from pylab import figure, show, np t = np.arange(0.0, 2.0, 0.01) s1 = np.sin(2*np.pi*t) s2 = np.sin(4*np.pi*t

java实现画图板上画一条直线

目标:在画图板上画一条直线,供大家参考,具体内容如下 一.首先需要建立一个界面 过程:1.创建界面对象(Java语言中已经有,可直接创建对象来使用). 2.对于一个界面,我们需要设置它的大小.居中.界面关闭.界面可见. 3.写主方法去实现界面. (目前界面还未实现画图板的功能) public class DrawUI { //显示界面的方法 public void show(){ //创建界面对象 JFrame jframe = new JFrame(); //设置界面的尺寸.位置居中.关闭.标

Android使用自定义view在指定时间内匀速画一条直线的实例代码

本文讲述了Android使用自定义view在指定时间内匀速画一条直线的实例代码.分享给大家供大家参考,具体如下: 1.效果图: 2.自定义view实现 public class UniformLine extends View { private int x, y, nextX, nextY, incrementY, incrementX; public UniformLine(Context context) { super(context); } public UniformLine(Con

JS画线(实例代码)

IE下画线 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml&quo

SOSO地图JS画出标注和中心点以html形式运行

直接贴出代码,这个可以在本地创建一个html文件直接运行: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Map</title> <script charset="utf-8" s

利用three.js画一个3D立体的正方体示例代码

简介 three.js 是一款WebGL框架,WebGL可以让我们在canvas上实现3D效果.实现3D效果在国内来说还算是比较新的东西,可供查阅的资料也不多.这篇文章仅是一个入门篇,介绍如何绘制一个3D正方体. Three.js中的基本概念 Three.js包含3个基本概念:场景(Scene).相机(Camera)和渲染器(Renderer). 场景就是需要绘制的对象,相机代表取景的视角,渲染器是绘制的载体(可以挂靠到浏览器的DOM元素中), 也就是我们通过相机拍摄场景然后绘制到目标介质中去.

利用ECharts.js画K线图的方法示例

前言 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后台绑定. ichartjs 是一款基于HTML5的图形库.使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形. 支持饼图.环形图.折线图.面积图.柱形图.条形图等. Chart.js 也是一款基于HTML5的图形库和ichartjs整体类似.不过Chart.js的教程文档

JS画5角星方法介绍

复制代码 代码如下: function create5StarClip(context) { var n = 0; var dx = 100; var dy = 0; var s = 150; context.beginPath(); context.translate(100,150); var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4; for(var i = 0; i < 5; i++) { var x