HTML5
Luckie stone
Android应用开发。
展开
-
学习HTML5 Canvas这一篇文章就够了
一、canvas简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单的动画,甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己MacOS X WebKit推出,供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来,有人通过Gecko...转载 2019-03-17 12:25:21 · 1071 阅读 · 1 评论 -
前端简单入门-CSS基础
在这一讲进行之前,我还要再介绍两个HTML的块标签,span和div。他俩都是通用标签,没什么具体的语义。<span>标签通常用于标记段落中的某块文本内容,然后通过该标签,可以单独为这块文本内容增加CSS样式;<div>标签一般用于,将屏幕某块区域划分出来后,用该标签标记后可通过选择器作用自定义的CSS样式。例如,CSS的概述CSS(Cascading...转载 2019-06-24 06:47:40 · 105 阅读 · 0 评论 -
WebGL学习系列-片元着色器简介
前言到目前为止,我们绘制过点、三角形、矩形等,但使用的都是单色系。之前曾经说过着色器的概念,着色器分为顶点着色器和片元着色器,我们一直在使用顶点着色器,而对片元着色器基本没有提及过,本小节将展开对片元着色器的简单介绍。彩色的点之前提到过,顶点着色器决定点的大小、位置和颜色,而片元着色器是用于给像素着色的,初步看,片元着色器的任务好像给顶点着色器完成了,但实际上不然,顶点着色器只能决定点的颜...转载 2019-04-25 06:21:25 · 1622 阅读 · 0 评论 -
WebGL学习系列-基础矩阵变换
前言在图形学中,特别是涉及到3D的时候,矩阵变换起着非常重要的作用。在实际使用的过程当中,通常每一帧画面可能都会涉及到成千上万个顶点的坐标变换,如果没有矩阵变换计算,一个是计算复杂,一个是难以达到我们想要的计算效率。本小节将介绍通过矩阵计算来实现基本的图形变换。矩阵矩阵是一种多个数据集合的表示方式,定义为:由 m × n 个数aijaij排成的m行n列的数表称为m行n列的矩阵,简称m × ...转载 2019-04-24 06:27:58 · 482 阅读 · 0 评论 -
WebGL学习系列-基本图形变换
前言经过前面的学习,我们已经可以绘制基本的图形了。本小节将介绍基本的图形变换,介绍在WebGL中,如何对基本的图形进行平移、旋转和缩放。平移在前面的小节中,我们已经绘制过一个三角形,那时候,它看起来是这样的:我们知道,在WebGL中,要绘制一个基本的图形,我们只需要指定顶点的位置、大小和颜色,然后调用drawArrays接口进行绘制即可。现在,我们想要实现对三角形进行一个平移,比如...转载 2019-04-24 06:26:26 · 332 阅读 · 0 评论 -
WebGL学习系列-多边形绘制原理
前言前面学习了通过缓冲区对象来绘制多个点的原理,在实际的3D世界里,有好多复杂的模型,但细化分解后又是由一个个基础的几何图形构成的,掌握了基础图形的绘制才能够理解更加复杂的模型。本节将会讲解三角形,矩形以及利用三角函数绘制圆。WebGL几何图形绘制之前的篇章我们通过 drawArrays 这个api绘制过单个点以及多个点,然而,它的功能不仅仅如此,它也是绘制多边形的基石。先来看下面这张熟悉...转载 2019-04-24 06:26:15 · 445 阅读 · 0 评论 -
WebGL学习系列-使用缓冲区对象画多个点
前言一般而言,我们需要绘制的点的数量非常的多,所以不可能像第一个程序一样一个点一个点绘制,WebGL提供了缓冲区对象,用于处理绘制多个点的数据问题。预览效果图坐标系为了更好的理解点的位置,我们需要知道canvas以及WebGL的坐标系。canvas坐标系如下所示:WebGL坐标系如下所示:可以看到,WebGL的坐标系跟canvas坐标系是不一样的,原点位置不一...转载 2019-04-24 06:26:07 · 245 阅读 · 0 评论 -
WebGL学习系列-第一个程序
前言本篇学习第一个WebGL程序——画一个点,通过此程序来理解WebGL程序的结构,这是所有后续知识的开端。画一个点先看一下效果图:为了画这么一个点,在WebGL可不太简单,它会涉及到WebGL上下文以及着色器的概念,不要着急,咱们慢慢来理解。WebGL上下文学过Canvas的同学应该都知道,想要在浏览器中使用Canvas画图,需要先取得一个上下文,就像创建一个场景一样,有了...转载 2019-04-24 06:25:36 · 251 阅读 · 0 评论 -
WebGL学习系列-WebGL简介
WebGL概述相信大家都知道Web中有个叫canvas的画布,通过其提供的一些API,我们可以很方便的在浏览器的页面上画点、线、多边形、图片等。现在很多的html5小游戏也是由canvas来实现的。canvas技术相当于所见即所得,你画什么就在页面上展示什么,原理比较好懂。但是canvas主要是针对2D的,所以通常我们主要用于实现2D类的游戏。要说WebGL,得提提OpenGL。OpenGL...转载 2019-04-24 06:25:29 · 745 阅读 · 0 评论 -
vue页面引入three.js创造3d动画场景
vue中安装Three.js近来无聊顺便研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三方库。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。首先利用创建一个Vue工程若对创建vue工程有疑惑,可以参考我前面的博文:手把手教你利用脚手架搭建一个Vue工程,搭建好以后,我们开始引入t...转载 2019-03-24 09:19:11 · 3427 阅读 · 1 评论 -
手把手教你利用脚手架搭建一个Vue工程
一个简单Vue工程的搭建#本篇文章将带你如何使用webpack-cli脚手架搭建一个vue小工程,其实熟悉了就变得简单了,此篇文章主要帮助新手入门。具体操作图文流程如下所示:1.Node环境安装(1)node.js环境安装,可以从node.js中文网站进行对应镜像的选择与安装(附镜像链接如下)http://nodejs.cn/download/,具体安装流程见下面链接:https://ww...转载 2019-03-24 09:16:17 · 450 阅读 · 0 评论 -
前端简单入门-CSS基础(二)盒子模型、浮动与位置
盒子模型CSS里面有句话叫万物皆盒子,所以在这一小节要简单介绍一下CSS中的盒子模型。盒子模型的基本要素以下图中的按钮为例,在Chrome浏览器中查看这个元素,结果是这样的:蓝色部分(28 x 32 )是button的content,绿色的是padding,黄色的是border,深黄色是margin。盒子模型很简单,其实就这4个概念。因此,一个元素在页面上的宽高就是由这四个...转载 2019-06-24 06:47:47 · 194 阅读 · 0 评论