展开

关键词

HTML系与鼠事件

HTML系与鼠事件 在开发中处理鼠事件时,经常会碰到 offset、scroll、client 这几个关键字,每次处理页面元素的和偏移前,都要网上去搜资料,还会踩一些坑,影响开发效率。 一、图解HTML的四个系统  HTML有四个常见的系统:screen,page,client和offset,用于描述DOM元素的Box尺寸和MouseEvent中的位置。   screen.height - screen.availHeight2. page系  参照点:整个页面的左上角(整个页面的意思就是你整个网页的全部,按照整个html文档的长度和宽度来计算)。   document.body.offsetHeight二、图解鼠事件  鼠事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的位置。   (MouseEvent)可以发现:其中包含了许多的,且每个的含义都不一样。

13650

Canvas入门到高级详解(中)

案例 16 缩放案例.html3.3.2 位移布(重点) ctx.translate(x,y) 方法重新映射布上的 (0,0) 位置 参数说明: x: 添加到水平(x)上的值y: 添加到垂直 (y)上的值 发生位移后,相当于把布的 0,0 更换到新的 x,y 的位置,所有绘制的新元素都被影响。 案例:18 旋转布.html 3.3 绘制环境保存和还原(重要)ctx.save() 保存当前环境的状态 可以把当前绘制环境进行保存到缓存中。 cpy: 贝塞尔控制点的 y x : 结束点的 x y : 结束点的 y ? x y: 结束点的 y ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);ctx.stroke(); 案例:25 绘制贝塞尔曲线.html ?

29430
  • 广告
    关闭

    50+款云产品免费体验

    提供包括云服务器,云数据库在内的50+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    opengl入门-系统(3)多model3D动

    code=src1.getting_started6.3.coordinate_systems_multiplecoordinate_systems_multiple.cpp注意:对齐次的理解,一开始对 glm::vec3( 2.0f, 5.0f, -15.0f),有点不理解,model的范围是在-1--+1之间,x和y轴分别移动了2和5,这不是移到外面了么?

    18630

    OpenGL系及转换

    为了使被显示的三维物体数字化,要在被显示的物体所在的空间中定义一个系。这个系的长度单位和轴的方向要适合对被显示物体的描述,这个系称为世界系。世界系是始终固定不变的。 世界系以屏幕中心为原点(0, 0, 0),在OpenGL中用来描述场景的。比如使用这个系来描述物体及光源的位置。世界系,是不会被改变的。 局部系:OpenGL还定义了局部系的概念,所谓局部系,也就是系以物体的中心为原点,物体的旋转或平移等操作都是围绕局部系进行的,这 时,当物体模型进行旋转或平移等操作时,局部系也执行相应的旋转或平移操作 无论是在世界系中进行转换还是在局部系中进行转 换,程序代码是相同的,只是不同的系考虑的转换方式不同罢了。视系:以视点为原点,以视线方向为Z轴正方向的系。 这个投影通常用于动、视觉仿真以及其它许多具有真实性反映的方面。

    1.4K50

    球心与本地

    1球心(ECEF)与本地(NEU)假如你来到一个陌生城市,你很可能需要问路、通常会告诉你向北走100米,右转,向东走100米,理解起来很直观。 比如前者是局部的平面,而后者是球面。因此,同一个点相对不同的原点,具有不同的相对位置:既是地球上的一个经纬度,又是“出门右转富士康”的这类的位置。 如图,蓝色系就是球心,而绿色系是以球面一点为原点的本地系。准确讲,就是该点对应球的切面和法线组成的空间。? 这自然引出了这个问题:如何从以球心为原点的球面到以球面上任意一点为原点的局部系之间的转换,答案就是矩阵。?系的换算,其实就是原点之间的转换。 如上,假设该经纬度对应的笛卡尔为(XYZ),这就是从球心原点到该点的平移,两者结合得出矩阵的计算公式如下:?公式有了,我们把复杂的空间几何问题转为数值计算,便于抽象理解和计算机的处理。

    66560

    系与矩阵(4):球心与NEU

    如上图,模拟了一个以球心为原点的固定系,该系有一个名称地心地固系(ECEF),对应我们之前介绍的系? ,而平面场景在我们生活中更为直观,上北下南,左东右西,对应上图中绿色的切平面,简称NEU系,对应之前介绍的系?。于是,给定一点?,我们需要计算一个矩阵?,实现两个系的转换。 这里对应两个环节,(1)球心系的单位换算, 从经纬度?到米单位的笛卡尔?;(2)从ECEF到NEU,从全球系?到本地系?。?整体来看,默认初始时?,从F到M大概需要三个过程:(1)沿? ,方向均向内;(2)沿着新系中的红轴逆时针旋转?;(3)沿新系的?方向平移到绿色系的原点。前两个旋转矩阵对应的是:?这样,只要知道平移?对应的三个分量,可以轻松的得到最终的矩阵。 ,因此,我们可以获取ENU系三个轴的向量?,这样,对应的转换公式为:?这样,我们在ENU本地系上的一点?,对应球心系上的点?,满足:?

    12720

    D3.js库-5-做一个简单的图形

    布在HTML中使用的布有两种:SVG和Canvas,在D3中使用的是SVG。 圆形的元素签是circle rect的四个属性: x:矩形左上角x y:矩形左上角的y width:宽度 height:高度 需要注意的:在SVG中,x轴的正方向是水平向右,y轴的正方向是垂直向下的 代码解释当我们定义了数组和布之后,需要添加和数组长度相同的矩形元素svg.selectAll(rect) 绘制矩形使用rect签 .data(dataset) 绑定数据dataset .enter attr(x, 50) 定义左上角的x.attr(y, function(d,i){ 定义左上角的y:d是作用的数据,i是索引号 return i * rectHeight;}).attr( 有数据但是没有图形元素的时候,使用append()进行追加 .attr(x, 50) 定义左上角的x .attr(y, function(d,i){ 定义左上角的y:d是作用的数据,i是索引号

    10520

    使用canvas实现一个圆球的触壁反弹

    HTML JS1.获取上下文let canvas = document.getElementById(canvas);let ctx = canvas.getContext(2d);2.实现一个球类 1 ); 移动圆 ball.x += ball.mx; x递增 ball.y += ball.my; y递增 x轴加移动的距离大于布宽度(到达右边界) 或 x轴加移动的距离等于0( 到达左边界) if (ball.x + ball.mx > canvas.width || ball.x + ball.mx < 0) { ball.mx = -ball.mx; x轴递减 }; y轴加移动的距离大于布宽度(到达下边界) 或 y轴加移动的距离等于0(到达上边界) if (ball.y + ball.my > canvas.height || ball.y + ball.my < 0) { ball.my = -ball.my; y轴递减 }; 递归调用当前方法 window.requestAnimationFrame(arguments.callee); })()

    44350

    使用canvas绘制圆弧动

    初始布对于canvas的绘制,首先需要在html内指定一块布,即, 可以看做是在PS中新建一个空白文档,之后所有的操作都将呈现在这个文档之上,与PS的区别是,canvas本身没有图层的特性,当需要展示不同维度的视图时 ,需要交由html的位置关系来解决。 canvas签上,值得一提的就是width和height两个属性,这两个属性代表着布的宽高,与canvas样式上的宽高有很大区别。 ctx.arc(x, y, radius, startAngle, endAngle );这个函数可以接收6个参数,前五个为必填,分别为圆心x,圆心y,半径,起始角度,结束角度,方向(默认为false x, y:在canvas当中,系默认以左上角为原点,如果想让圆弧动布中心点旋转,可以将圆心点设置为布中心点,即布长宽的12,假设设置的布长宽均为100,那么圆心点的即为(50, 50

    41820

    SVG 图像入门教程

    二、语法2.1 签SVG 代码都放在顶层签之中。下面是一个例子。 的width属性和height属性,指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。 这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。2.2 签代表圆形。 上面的代码定义了三个圆。签的cx、cy、r属性分别为横、纵和半径,单位为像素。 都是相对于布的左上角原点。class属性用来指定对应的 CSS 类。. 的d属性表示绘制顺序,它的值是一个长字符串,每个字母表示一个绘制动作,后面跟着。 M:移动到(moveto)L:直线到(lineto)Z:闭合路径2.9 签用于绘制文本。 2.14 签用于插入图片文件。 上面代码中,的xlink:href属性表示图像的来源。2.15 签用于产生动效果。 上面代码中,矩形会不断移动,产生动效果。的属性含义如下。

    23610

    前端-SVG 图像入门教程

    二、语法2.1签SVG 代码都放在顶层签之中。下面是一个例子。    的width属性和height属性,指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。 这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。2.2 签代表圆形。          上面的代码定义了三个圆。签的cx、cy、r属性分别为横、纵和半径,单位为像素。 都是相对于布的左上角原点。class属性用来指定对应的 CSS 类。 的d属性表示绘制顺序,它的值是一个长字符串,每个字母表示一个绘制动作,后面跟着。1、M:移动到(moveto)2、L:直线到(lineto)3、Z:闭合路径2.9 签用于绘制文本。    2.14 签用于插入图片文件。    上面代码中,的xlink:href属性表示图像的来源。2.15 签用于产生动效果。            上面代码中,矩形会不断移动,产生动效果。

    39030

    canvas-入门

    定义canvas是HTML5新增的一个重要元素,先看下它的定义: is an HTML element which can be used to draw graphics using scripting :canvas只是一个普通无色透明区域,可理解为布,同时绘制图形不是用鼠,而是用JS脚本。 document.getElementById(j-canvas);if (canvas.getContext) { var ctx = canvas.getContext(2d); 支持处理} else { 不支持处理}系既然我们要在 canvas上东西,肯定要知道的位置,所以就牵扯到系的东西。 在canvas中系分2D、3D系统,除了默认的还有 系转换 的概念,我们这次只探讨2D默认系,如下:?

    340100

    Python绘制玫瑰和佩奇

    1 turtle库简介turtle 库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x、纵轴为y的系原点,(0,0)位置开始。 它根据一组函数指令的控制,在这个平面系中移动,从而在它爬行的路径上绘制了图形。2 笔在布上,默认有一个原点为布中心的轴,原点上有一只面朝x轴正方向小乌龟。 这里我们描述小乌龟时使用了两个词语:原点(位置),面朝x轴正方向(方向), turtle绘图中,就是使用位置方向描述小乌龟(笔)的状态。 笔(笔的属性,颜色、线的宽度等)turtle.pensize():设置笔的宽度;turtle.pencolor():没有参数传入,返回当前笔颜色,传入参数设置笔颜色,可以是字符串如green www.cnblogs.comchen0307articles9645138.htmlhttps:www.cnblogs.comwidowsp10100041.htmlhttps:www.cnblogs.comxiaoyhp9670748.html

    58021

    opengl入门-系统(2)单model 3D动

    1.gif系统(1)记录了基本的变换的过程,这篇记录从二维到三维生成一个3D动效的代码实现。 代码和系统(1)基本一样,涉及到生成和贴图计算有点区别,详细代码如下记录,有几点需要注意:使用glDrawArrays(GL_TRIANGLES, 0, 36)绘制片元,DrawArrays和DrawElements 看怎么设计代码方便吧,如果有大量相同的三角形顶点,那就更适合DrawElements不要忘了设置glEnable(GL_DEPTH_TEST),使深度测试生效,没有设置片元会相互遮盖错乱,生效后相机位中靠前的片元会遮盖后面的片元 glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0); 第一个参数“0”和shader里的location(0)应该是一一对应的,这样才能把传入到定点着色器里

    17610

    HTML5图形绘制

    一个布在网页中是一个矩形框,通过签来绘制,签默认没有边框和内容,需要使用style属性来添加边框。 canvas签通常需要指定一个id属性(脚本中需要引用),width和height属性定义布的大小。可以在HTML页面中使用多个签。示例如下。     canvas签  body{margin:0;padding:0} canvas{margin:10px;padding:0px} JavaScript在布上的绘图需要首先创建布,然后创建context fillRect(0,0,150,100)是指在布上绘制150100的矩形,从左上角开始(0,0)。布上的X和Y用于在布上对绘进行定位,鼠移动的矩形框上,显示定位。 在canvas上绘制路径,需要利用moveTo(x,y)和lineTo(x,y)分别定义路径开始和结束,利用stroke()方法绘制出通过moveTo(x,y)和lineTo(x,y)方法定义的路径

    78400

    d3从入门到出门

    签,则会被转义 html 修改元素内容 示例: d3.select(p).html(段落一修改后的内容) 将段落一的内容修改为text函数传入的参数,如果传入的文本包含html签,不会被转义 属性增加修改 transition 启动动效果 duration 动时间,单位为毫秒 ease 过渡方式, 默认为线性过渡 delay 延迟时间,在指定的一段时间后才启动动 选中第一个元素,先延迟延迟一秒, .range(color)console.log(ordinal(1))console.log(ordinal(4))console.log(ordinal(100)) 输出blueblackblue轴常见图展示一般都会带有轴 ,因为轴是一个很常用的功能,所以d3有内置的函数用于生成轴可选轴axisTopaxisRightaxisBottomaxisLeft上面的上下左右主要指周的刻度文字的位置,比如axisTop ;轴微调旋转轴文字d3.selectAll(svg > g text) .attr(transform, rotate(45)) 文字沿当前方向距离轴位置大小 .attr(y, 20)柱状图柱状图示例参考

    56520

    canvas离屏技术与放大镜实现

    保存后的图像,就有已经有了水印,如下图所示: 实现放大镜在上述中心缩放的基础上,实现放大镜主需要注意以下 2 个部分:细化处理canvas的鼠响应事件:滑入、滑出、点击和松开重新计算离屏(详细公式计算思路请见代码注释 )重新计算鼠相对于 canvas 签的(详细公式计算思路请见代码注释)代码如下: Documenttitle> canvas { display: block; margin: 0 auto; canvas 签的 isMouseDown = true; drawCanvasWithMagnifier(true, point); 绘制在离屏canvas上绘制放大后的图像 }; 鼠移动 (false); 不绘制离屏放大镜 }; }; ** * 返回鼠相对于canvas左上角的 * @param {Number} x 鼠的屏幕x * @param {Number} y 鼠的屏幕 >放大镜效果如下图所示(被红笔出的区域就是我们的正方形放大镜): 扫码关注「心谭博客」, 专注前端与算法目前已有前端面试、剑指Offer·JS、动设计、Webpack等系列专题

    36710

    利用canvas的fillText属性绘制文字并实现居中和清空

    (40, 40, 35, 0, 2 * Math.PI)  圆(x,y,半径,起点(3点钟为0PI)),    ogc.strokeStyle = rgb(69, 174, 234) 路径的样式     ogc.lineWidth = 10 线的宽度    ogc.stroke() 使用 stroke() 方法在布上绘制确切的路径。     16像素 字体Arial    ctx.fillStyle = #F09000 字体颜色    ctx.fillText(a + %, 40, 35) fillText里面的可填写的值(文本内容, x , y, 文本最大宽度)    ctx.font = 14px Arial    ctx.fillStyle = #FF9000    ctx.fillText(num + 次, 40, 50)     .compost346.html (adsbygoogle = window.adsbygoogle || []).push({});

    1.9K10

    原创 | matplotlib图教程,设置签和间距

    xlim、ylim我们首先来介绍轴的范围,轴的范围很好理解,有的时候我们产出的数据的范围可能并不是完全我们想要的。 在默认的图像当中,系统帮我们选择的间距是2.5,即每隔2.5一个点,一共8个。 而通过xticks我们可以自己设置点的间隔以及数量,比如假设我们想要x轴每间隔5一个点,我们可以这么来设置:? 我们直接在xticks当中放入了一个list,最后我们出来的图像的x轴就是根据这个list进行划分的。也就是说我们不仅可以定义轴的范围,还可以定义它的间隔。 总结我们简单回顾一下今天介绍的内容,一个是用来限制轴范围的xlim和ylim,另外一个是可以自定义整个轴间隔以及范围,甚至还可以更换名称的xticks、yticks。

    58230

    SVG基础知识

    等等相比canvas图表,SVG图表在过渡动方面有先天优势,能够实现很漂亮的过渡效果,例如D3 Tree三.SVG元素SVG有一套自己的元素定义(与HTML元素类似),用来描述二维图形。 用svg签包裹起来,可以直接嵌入HTML中,例如:svg demo sibling显示30x30px的黑方块,svg元素尺寸为100x100px,svg元素默认display: inline,所以”sibling 当然,用圆角圆的技巧仍然适用: x, y表示左上角的系与canvas 2d相同,左上角为(0, 0)circle cx, cy表示圆心位置ellipse rx, ry分别表示x轴方向半径和y 用Zz闭合路径,与手动L 起点不同,因为闭合指令会让把线段端点拼接起来各指令具体用法:M x,y 绝对m dx,dy 相对Ll 同上Hh 同上Vv 同上Cc c1x,c1y c2x,c2y x, refXY 参照点,绘制时该点与端点重合markerUnits 定义系单位 userSpaceOnUse当前系单位 | strokeWidth线宽(默认)markerWidthHeight 记宽高

    37820

    相关产品

    • 智能识图

      智能识图

      智能识图(IIR)为您提供微信同款、全品类、高精度、低门槛的商品识别服务。智能识图由腾讯云与微信联合打造,利用人工智能算法,可以快速、准确识别图片中的主体物品,并输出主体坐标。基于大量商品图片训练模型、数亿商品图片库检索,能够识别出商品的具体品牌、名称、型号或款式,并输出价格、介绍等内容。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券