发 送

在线教程

  • html canvas animation basic

    ... 现在已经建立了基本动画循环，接下来可以开始添加前面提到的更新、清除和绘制过程了（如图1所示）。我们建立一个简单的动画，使一个正方形每帧向右移动1像素。首先，需要在animate函数外 ... 表示： x = x + 1; 第二行代码是清除过程，可以将画布上的对象有效地擦除干净，为第三行代码绘制正方形做好准备。第三行代码的作用是实现最后一个过程。将变量x添加到fillRect方法调用中，说明绘制正方形始终从当前的x位置开始，该值始终在增加（如图 ...

  • css background

    ... 设置合适的颜色来匹配背景色，这样才具备较高的可读性。 背景图片（background-image） 背景图片就像墙壁上的墙纸起到装饰作用，比文本具有更强的视觉冲击力。CSS允许通过图片URL来为元素添加背景图片。 body{ background-image: url(images/diagonal-pattern.png);} 图片的表现行为（如何重复渲染、如何定位、大小等）由其他背景属性定 ...

  • html syntax

    ... brackets） < 和 > 之间的是 HTML 标签（tags）。 每个标签都有其特定的含义，这里 p 代表 段落（paragraph）. 标签通常是成对出现： 开始标签 <p> 定义段落的 起始 关闭标签 & ... ;p>Hello World!</p> Hello World! 自关闭（Self-enclosing）元素 有些元素如图片（img）、换行符（br）、输入框（input）只有开始标签，被称之为自关闭的元素： ...

  • css grid layout overview

    ... 了多样化复杂的交互应用系统， 一些以往被作者使用的文档布局工具，例如浮动（floats）、表格（tables）结合一些JavaScript脚本已经显得过时而低效。 在适应可用空间有限且尺寸变化跨度较大 ... 块区域布局 屏幕空间变大后各个区域的扩展 Grid layout 可以用来智能的调整（reflow）网页中的元素。 图2展示了一个页面被划分为5个主要区域的游戏应用：标题、状态栏（stats area）、游戏面板（game board） ...

  • html canvas animation bounce

    ... ）。同样，在y轴上也可以执行相同的检查。 由于有了这些相对简单的逻辑检查，你可以使一组形状移动到画布的边界时反弹回来（如图2所示）。甚至可以更改Shape类表示反转方向的属性的默认值，从而改变形状的运动方式。 Start Stop 一组在边界处弹回的形状 $(document).ready(function ...

  • html canvas image effects

    ... 很简单的，特别是现在你已经掌握了像素的操作方法。 反转颜色 这个效果将反转图像的颜色值。基本方法就是用255减去像素现在的颜色值(150)，所得的就是反转后的 ... )+(tileHeight/2); var pos = (Math.floor(y)*(imageData.width*4))+(Math.floor(x)*4); 前两行将得到当前块中心像素从0开始表示的（x，y）坐标。这个计算方法与马赛克例子非常相似，先找到块边缘的（x，y）坐标位置，然后加上一半宽 ...

  • html images

    ... 闭（self-closing） 元素（只有一个开始标签）。 src 属性定义图片的位置。和链接类似，你可以使用 相对 或 绝对 URL ... of techbrood: 尺寸（Dimensions） 图片通过宽（width） 和 高（ ... 图片。但我们可以通过img元素的宽高属性来改变其显示尺寸。上述例子中为图片指定了显示尺寸为宽700px*高375px，源图 ... 可能会有疑问，图片拥有宽高属性，记得我们在前面的章节说过内联元素一般不能设置宽高属性，那么图片究竟是内联 ...

  • html canvas drawimage

    ... Math.floor(Math.random()*255); }; }; 这是一个嵌套循环，第一个循环遍历每一行的块，第二个循环遍历当前行的每一列块（参见图4左边的栅格）。每一个块都赋了新的颜色值，这些值都是0至255的随机数。到现在为止，所有代码都是非常基础的。 现在， ... 块尺寸，这些循环遍历的次数与每个块中的像素个数相同。变量tr和tc表示当前访问块的像素行（基于块的高度）和像素列（基于块的宽度）（参见图4右边的栅格）。在这个例子中，每一个块的宽和高都是125像素，所以 ...

  • html canvas shapes

    ... .arc(x, y, radius, startAngle, endAngle, anticlockwise); 前面三个参数都很简单。开始角度和结束角度参数表面上很简单，但是需要适当解释才能够很好地理解它们的使用方法。简言之，在Canvas中，一条弧线是 ... 。这条路径最后停在离原点仅(x,y)一个半径且角度为结束角度的位置上（见图5）。 图5 绘制一条圆弧 一定要注意，Canvas中的角度是以弧度而不是角度为单位的。简单地 ...

  • svg polygon

    ... 个点，将其和需要判断的点连成线段，如果这条线段和各个路径的交点数目为奇数，这表示这个点在内部；偶数则表示在外部。 “evenodd”方式只填充奇数块，这样路径中间就会出现空白区域。 比如上图中的中心区域的点按照射线法判断都是在五角星路径外部，所以没有被填充。 Next → SVG 路 ...

推广服务（新）
最新文章

  • 实时光线追踪技术简介

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

  • 生成本地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...

    • 更多...