three.js xyz画布

ThreeJs 模型的缩放、移动、旋转以及使用鼠标对三维物体的缩放

首先我们创建一个模型对象 var geometry = new THREE.BoxGeometry( 100, 100, 100); //边长100的正方体 var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); 移动接下来我们尝试将模型中心移动到 100,100,100的位置方法1:Me

使用JS的画布制作一个瞄准镜

<canvas width="600" height="500" id="myCanvas"></canvas> <script type="text/javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //获取对应的CanvasRenderingContext2D

js 画布与图片的相互转化(canvas与img)

使用js将图片拷贝进画布 //将图片对象转化为画布,返回画布function ImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0);//0, 0参数画布上的坐标点,图片将会拷

关于使用Css设置Canvas画布大小的问题

问题分析我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述如果使用Css设置Canvas画布的大小,则导致画布按比例缩放到你设置的值. 原因在Canvas元素的内部存在一个名为2d渲染环境(2d redering context)的对象,所以,通过Css设置画布尺寸会引起奇怪的效果. 解决方案在Html页面上加入canvas元素(不能使用js动态加入canvas). 通过Html设置画布大小.可以直接在Html

JS + HTml 时钟代码实现

JS+ Html 画布实现的时钟效果图: 闲来无聊做了一个网页的时钟,效果模拟传统时钟的运行方式, 运用了html 的画布实现指针,背景图片引用了网络图片. 具体原理: 首先将时钟分为四个不同区域,对每个区域计算cos,sin 来确实指针顶点位置.在通过画布来绘画出指针.通过setInterval 每秒刷新指针位置实现传统机械表针的动态跳动. 本人是JS开发程序员,从业1年多.闲来无聊的简单页面, 欢迎大家提问,或者建议.共同进步代码部分,直接复制HTML 文件中即可查看效果: <!DOCT

JS 前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装开始使用gulp gulp的API介绍一些常用的gulp插件 1.gulp的安装首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm inst

js+canvas(H5)实现小球移动小demo

*canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MoveDemo</title> <script type="text/javascript"&

前端自动化之路之gulp,node.js

随着现在前端技术的不断发展,和各个公司对前端项目开发更新速度的要求,前端自动化越来越受到大家的重视,之前传统的前端开发方式已经越来越不能满足开发的需求了,于是各种自动化工具随之产生了.而gulp就是其中一款非常强大的工具. 1.安装node.js:由于gulp是基于node.js的.所以首先需要安装node.js,node下载地址:http://nodejs.cn/download/ 安装比较简单.安装完成之后在cmd里输入:node -v 查看安装的node版本. npm -v 查看安装的n

前端 go.js 流程图基于vue开发项目案例

一.流程图效果最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发.其次,要依赖于内部API开发需求,开发项目需求的时候就要花费大量的时间去熟悉go.js的API,然后才能进行开发.话不多说,我就先把我最近做的项目案例效果图展示一下: 看到效果图大家可能会想这个挺简单的,会想没什么难点,其实真正开发的时候才会知道的.才会领悟到. 二.为什么选go.js流程图插件去开发项目? 在项目开发一期的时候我用的不是go.

一个最简单 node.js 命令行工具

一个最简单 node.js 命令行工具 node.js cli $ node cli.js xyz # OR $ node cli xyz 接受参数 process.argv js "use strict"; /** * * @author xgqfrms * @license MIT * @copyright xgqfrms * @created 2020-07-17 * @modified * * @description node.js cli & process.arg

（转）gulp使用

前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装开始使用gulp gulp的API介绍一些常用的gulp插件 1.gulp的安装首先确保你已经正确安装了nodejs环境.然后

前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装开始使用gulp gulp的API介绍一些常用的gulp插件 1.gulp的安装首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm inst

前端构建工具gulp介绍

2016年3月3日 10:46:08 晴前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装开始使用gulp gulp的API介绍一些常用的gulp插件 1.gulp的安

H5 canvas绘制出现模糊的问题

在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的怎么会模糊,先前也有考虑到适配不同尺寸的移动设备,担心直接使用 img 或者设置 background 会使图片拉伸而变得模糊,所以使用 canvas 来绘制转盘与九宫格,精确的计算每个物体所在的坐标以及尺寸绘制出来的,怎么会模糊. 然而将绘制的内容与页面中的其他文字或者图片作对比后,发现使用 ca

前端构建工具gulpjs

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快. 1.安装首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装

gulp构建前端开发环境

1.gulp环境的安装首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 2.建立文件夹 mkdir item 3.初始化项目: npm init 这时候查看一下item文件件多了一个package.json.这是gulp的配置文件. 里面的内容就是我们刚才填写的信息. 4.继续命令行,安装gulp包,并且在配置文件中 --save-dev表示在package.json添加配置 npm install gulp --save-dev

[转载]前端构建工具gulpjs的使用介绍及技巧

转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装开始使用gulp gulp的API介绍一些常用的gulp插件 1.gulp

webpack入门（七） API in LOADERS

介绍 loaders允许你用require() 预处理文件(preprocess files)或者加载他们,在其他的构建工具中,loaders就是一种像“任务(tasks)”的东西.他提供了一种处理前端构建的强大的方式.loaders可以从不同语言类型的文件来转换文件,比如coffeescript,内联image的data url.loaders甚至允许你在你的js文件中用require()加载css文件. 让webpack用loader转换一个模块,你可以指定模块需要的loader,就像在re

webpack入门（四）webpack的api 2 module

接着介绍webpack的module. module Options affecting the normal modules (NormalModuleFactory) 这些选项影响普通的模块 module.loaders An array of automatically applied loaders. 一个自动装载机(loaders)的数组 Each item can have these properties: 每一项都有这些属性 test: A condition that m

gulp的使用介绍及技巧

gulp的使用介绍及技巧转载: https://www.cnblogs.com/2050/p/4198792.html 1.gulp的安装首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上--s

HTML5的新标签之一的Canvas

一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布画布 Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素. canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. HTML5之前的web页面只

three.js xyz画布

热门专题