发 送

在线教程

  • html canvas transform

    ... 能，我肯定会选择rotate方法。到现在为止，我们介绍的变形方法的共同特点是它们都很容易调用。rotate方法也不例外，你只需要传入以弧度为单位的2D渲染上下文旋转角度值即可： context.rotate(0.7854); // Rotate 45 degrees (Math. ... 转后的正方形（参见图12）。 使用变换矩阵进行旋转 这些旋转效果完全是你从零开始做出来的，根本没用rotate方法！一般而言，这三个核心的变形方法在大多数时间都能 ...

  • html canvas animation physics

    ... 码并没有什么特别之处，实际上，它与上一章使用的代码几乎完全相同。主要的不同之处在于，上一章使用的对象是形状，而本章使用的对象是小行星。 将以下代码添加到一个外部JavaScript文件中，命名为 ... asteroids.push(new Asteroid(x, y, radius, vX, vY, aX, aY)); 仅对代码做这些修改，还无法看到加速度的效果，因为你还需要将加速度应用到每个具体的小行星。应用加速度就和把加速度添加到物体的当前速度一样 ...

  • css transform

    ... translate: 位移方法，包含3D版本，支持在3个坐标轴方向移动元素位置（x,y,z） rotate: 旋转方法，使元素沿中心点旋转特定角度 scale: 伸缩方法，使 ... 数代表x坐标轴位移，第二个参数代表y坐标轴位移。 位移功能的效果跟相对定位中通过 left 和 top 来移动元素位置类似。 在前面 ... 的关键因素有3个：视角、空间和物体。其原理可参考阅读如下博文玩转CSS3 3D - 原理篇。 变换原点（transform-origin） transform-origin是变换 ...

  • html canvas gradient

    ... ），每一种渐变在2D渲染上下文中都有对应的创建方法，线性渐变对应的是createLinearGradient，而放射渐变对应的是createRadialGradient。 这两种方法都返回一个CanvasGradient，可以使用CanvasGradient对象本身的addColorStop方法对它进行进一步处 ... 两个圆的大小不同，那么渐变效果就会从较小的圆延伸到较大的圆上。 注意：虽然渐变的效果很漂亮，但是使用cavans来创建渐变并非总是最好的方法，特别是在将它们作为背景使用时 ...

  • html canvas states

    ... 绘图状态指的是描述某一时刻2D渲染上下文外观的整套属性，从简单的颜色值到复杂的变换矩阵（transformation matrix）及其他特性。 用于描述画布绘图状态的全部属性 ... 态的值——它会变成红色（参见图1）。如果只是修改颜色，效果可能还不够明显，但这个概念适用于所有能够保存到绘图状态中的画布属 ... 。 恢复多个绘图状态 关于绘图状态的保存和恢复还有很多其他内容，本节的目的只是介绍一些基础知识。从现在开始，你就能够理解后续章节关 ...

  • css grid layout overview

    ... 随着互联网的发展，网站已经从单纯的文档演变成了多样化复杂的交互应用系统， 一些以往被作者使用的文档布局工具，例如浮动（floats）、表格（tables）结合一些JavaScript脚本已经显得过时而低效。 在适应可用空间有限且尺寸变化跨 ... 和 5)。 通过结合使用grid layout和媒体查询（media query）技术（我们在CSS进阶课程中的响应式技术章节会详细讲解该特性）， 作者能够使用相同的语义标记，但独立于其代码顺序来重新安排元素的布局，以在两个屏幕方向上获得不同 ...

  • html canvas loadimage

    ... 的主要原因是，它使我们能够用2D渲染上下文方法对原本不是在画布中创建的图像进行处理。我们还可以使用几种特殊的像素处理方法，对图像执行一些有趣的特殊操作。 在画布中进行像素处理实际上 ... 0, 0); }); 这里所做的第一件事是使用Image类为HTML img元素赋一个空的DOM对象。 然后，通过把它的src属性设置为一个有效的图像文件路径，就可以将该图像加载到图像元素中， 这就好像是设置了HTML img元素的src属性。实际上这创建了一个普通的HTML img元素 ...

  • html web socket

    ... 信息推送”的效果，大都采用了轮询（Polling）或Comet技术，轮询就是网页定时发送ajax请求给服务器来查询特定数据的状态。 ... 靠，我被你烦挂了。。。（Response） Comet是轮询技术的改进版本，该技术有两种实现方式：长轮询（Long Poll）和iframe流。 ... 具体而言，我们认为WebSocket适合用于实现游戏、股票交易、同步多用户文档编辑以及即时聊天等实时服务。 WebSocket 协议 协议包含两个部分： ...

  • html canvas imagedata

    ... 问像素值 直接操作图像的像素数据 虽然调整尺寸，裁剪和变形可用来创建有趣的图像效果，但画布还有另一个更强大的特性：像素处理。通过访问2D渲染上下文的各个像素，我们就能够得到每一个像素的颜色和阿尔法值等信息。我们还能够修改每 ... ，那么画布对于访问这个图像的像素级数据会有严格的限制。 这主要是为了防范跨站脚本攻击（XSS），试想一下如果一个不受你的网站控制的脚本能操控你网站用户的资源，这会导致多大的安全问题。 解决这个问题的最简单方法就是 ...

  • css gfc

    ... 文， 当把一个元素的display属性设置为grid或inline-grid的时候，我们说该元素使用了网格布局（grid layout）。 该元素将生成一个网格容器（grid container），网格容器将创建一个独立的渲染区域（也就是GFC）来绘制其中的内容。 GFC和BFC基本 ... line,::first-letter对网格容器无效，而float、vertical-align对网格项（grid item）无效。 Grid layout是CSS3引入的新 ...

推广服务（新）
最新文章