在线教程

  • html web worker

    ... workers不能访问如下的JavaScript对象,即不能操作页面DOM树: window 对象 document 对象 parent 对象 Web worker不能跨源(域名/协议/端口的组合)访问。比如我们不能把demo-worker.js文件放在techbrood.com主域名下,却要在wow.techbrood.com中调用执行。 此外,熟悉多线程的同学,需要记住多线程不是免费的午餐,线程的频繁创建和销毁 ...

  • html canvas animation object

    12.22 HTML Canvas动画对象 使用面向对象的方式来创建多个动画 在创建动画时,需要克服的一个主要问题是:准确记忆要绘制的对象的内容及位置。我们采用的方法是:在循环外部设置一个变量来保存需要绘制的对象的位置值,并通过fillRect调用和在循环内部使用位置变量,就可以获取需要绘制的对象的内容及位置信息。 但是,如果需要绘制多个动画形状该怎么办呢?甚至在创建循环时你都不知道 ...

  • html canvas drawimage

    12.19 HTML Canvas绘制图像 通过像素操作来绘制图像 前面我们讲解了如何创建图形(shape)以及加载图像(image),这一节我们讲述如何通过像素操作从零开始创建图像。 要创建一些像素,需要调用2D渲染上下文的createImageData 方法。通过传入宽度和高度,它会返回一个包含所有常规属性的ImageData对象:width、height和(最重要的)data。data属性所包含的 ...

  • html local storage

    12.27 HTML 本地存储(Local Storage) HTML本地存储允许在本地浏览器中存储数据 如课程引言中所述,本地应用程序(如移动APP)能够利用本地操作系统的文件系统来存储和读取数据,这使得其可以在离线环境下工作,由于节省了大量网络数据传输,从而可以获得更高的性能。 HTML5里面引入的本地存储(Local Storage)接口就是为了达到相同的目的,把部分 ...

  • html canvas animation basic

    12.21 HTML Canvas创建动画 动画的本质就是一连串的图像绘制 画布中的动画与一般的动画在理论上并没有太大的区别。动画的本质就是一连串的图像,每个图像之间的差别非常微小, 并且它们以极快的速度连续显示,每秒钟显示的图像非常多,人的肉眼通常认为自己看到的是一个正在运动的物体,而不是一张张连续显示的静态图像。 其原理就像你在学校读书时翻书一样,如果你翻书的速度 ...

  • html canvas animation circular

    12.23 HTML Canvas动画 - 圆周运动 使用Canvas实现一个圆周运动动画 形状不一定始终沿着直线运动。如果你需要的动画效果是沿着圆周运动,例如,沿着圆形轨道运行(如图1所示)该如何实现呢?这是完全可以实现的,并且不需要使用太多代码,这里需要使用三角函数的相关知识,可能需要你稍微动一下脑筋。 使形状动画沿着圆形轨道运动 概念非常简单:将一个形状放在圆周的边缘处(它 ...

  • html canvas image effects

    12.20 HTML Canvas绘制图像 为图像添加一些基本的特效 在PhotoShop中有专门的效果工具,Canvas也提供了一些基本的效果接口。这种效果在画布中实现是很简单的,特别是现在你已经掌握了像素的操作方法。 反转颜色 这个效果将反转图像的颜色值。基本方法就是用255减去像素现在的颜色值(150),所得的就是反转后的颜色(255-150=105)。 让我们尝试一些不同的操作,然后看看 ...

  • html canvas adjustimage

    12.16 HTML Canvas图像调整和裁剪 根据应用场景来调整或裁剪图像 我们现在知道调用drawImage方法的第一种方式,即将完整尺寸的图像绘制到画布上,但超过画布边界的部分被剪掉了。 为了解决这个问题,需要调整图像大小或者控制图像的裁剪。通过drawImage方法的最后两种调用方式都能够完成这两个任务。 第一种调用可以调整图像大小,第二种可以同时调整和裁剪 ...

  • html web socket

    ... 聊天应用 Socket.io网站有一个使用nodejs做服务器的即时聊天应用,你需要安装node.js(作为测试,你可以安装在自己的Windows/Mac/Ubuntu电脑上,使用localhost访问), 接着创建一个socket.io的app ... 做服务端,然后使用socket.io的js客户端部分实现一个发消息的网页应用。最终的运行效果如下: 具体步骤请阅读://socket ...

  • html canvas animation bounce

    12.24 HTML Canvas动画 - 碰撞反弹 使用Canvas实现碰撞检测和反弹动画 到目前为止我们使用的示例其实都没有边界。也就是说,当形状移动到画布的边界处时,什么都没发生,它们只是消失在我们的视野中,再也看不见了。 这也许是你需要的效果。例如,如果你只是创建一段简短的动画,并且动画在到达边界之前就会停止,或者你希望形状移动到画布之外。 但是,如果你不需要 ...

推广服务(新)
最新文章
  • 实时光线追踪技术简介

    实时渲染视频级别的计算机三维图形是计算图形领域的终极目标,与现在普遍使用的光栅化渲染技术相比,光线追踪普遍被视为视觉技术的未来方向,可带来近乎真实的真...

  • 生成本地npm包

    1、创建一个文件夹,此处我的文件夹名字为test-my-pack

    2、在文件根目录初始化npm,可以一路回车
    npm

  • Oculus Go手柄(控制器)使用说明

    Oculus Go是Facebook的一体式、3Dof VR眼镜,其手柄(即控制器)功能很简单。
    电池安装
    配对控制器
    下载 Oculus 应用(这个需要手机科学上网)并...

  • 基于elementUI封装自己的UI组件库

    初始化 project这里我们使用官方的 vue-cli 初始化一个 Vue 项目npm

  • three.js添加场景背景和天空盒(skybox)

    本文我们介绍在three.js中如何给3D场景添加背景,我们有3种方式来实现这个目的。通过html添加背景元素,这实际上一个2D背景;在three.js加载图片并设置为scene.b...

  • 更多...