html5

《每周一点canvas动画》——万有引力

每周一点canvas动画代码文件本章介绍,另一个动画应用——万有引力。听起来似乎有些玄乎,但是多事情千万不要被表面现象所迷惑,理解了原理就很简单!不管是地球上的是物体,还是宇宙中的星辰,物体与物体之间总是存在着一种看不见摸不着的的力场作用,这也就是为什么牛顿会被苹果砸,地球会围绕太阳做运动。在上一章我们讲解动量守恒,让很多人头疼不已,因为那应该算是这个系列最难的部分了吧。但

HTML5 VideoAPI,打造自己的Web视频播放器

本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。这样的空元素语法形式。2.重要HTML属性controls:ontrol:如果出现该属性,则向用户显示控件,比如播放按钮。每个浏览器中的播放控件都不太一样,但用途都一样,都可以控制开始和结束,跳到新位置和调节音量

小白上学のcanvas零基础

元素看起来和 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上, 标签只有两个属性—— width和height。当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲。元素有一个做 getConte

如何打造一个令人愉悦的前端开发环境(一)

文章来源最近几年,前端发展越来越迅速,各种萌新加入了前端这个大家庭,大有赶IOS、超Android的趋势呀!同时,萌新们提出了各种前端工作问题,除了最基础的html、css、js三板斧之外,最让人头疼的应该是关于环境的配置问题,所以以环境作为切入点,开始一系列的前端开发环境配置文章。主要会涉及到打包、构建、编程工具、debug等等前端环境,以及前后端分离、Nodejs中间层

前端Javascript与Nodejs的异同

前言很多小伙伴学Node的时候,都没有好好认识她就开始疯狂追求,想一举拿下,直接在网上搜索Node实战,想知道她活好不好,想先用她建个简单博客练练手。JavaScript和Nodejs我相信很多入坑Nodejs的人都是前端转过来的,但是局限于公司项目用不到Nodejs,只能自学,有些重要且基础的东西就忽略了。下面我们说一下前端的Javascript和Nodejs。每个前端大

css实现文字越界加点点点显示,并且后面紧跟一个图标

文字越界添加...显示 在HTML页面上,会遇到当文字长度超出一定长度的时候,将超出的部分显示为...的情况,这个功能很好实现,很多人都可以直接写出来。 示例代码: .demo {display: block;text-overflow: ellipsis; //显示省略符号来代表被修剪的文本,也可以自定义overflow: hidden; //溢出内容隐藏white-sp

谷歌地图API 开发 之 获取坐标以及街道详情

自己的项目中有获取当前点击的坐标经纬度或者获取当前街道的信息的需求。估计这个对于新手来说,还是比较麻烦的,因为从官网上找这个也并不是很好找,要找好久的,运气好的可能会一下子找到。献上自己写的测试案例。代码如下: Simple Map html, body { height: 100%; margi

谷歌地图API 开发 之 Geocoding API

大部分项目还是都有要获取当前点击的坐标经纬度或者获取当前街道的信息的,然而谷歌API 的文档也并不是很直观。官网地理编码服务地址:https://developers.google.com/maps/documentation/javascript/geocoding在服务栏里的地理编码里,为什么说是服务呢,用谷歌翻译了下,发现想获取坐标以及街道详情,需要调用谷歌的地理编码

(2/2)Canvas的交互&存为图片-爬坑篇

需求介绍page2上的canvas可交互,并实时显示交互结果;点击下一步,page2消失,page3显示;page3显示的是一张图片,图片有canvas交互区和另外的一些元素组成。实现思路canvas重绘运用canvas重绘的方法可以实时同步canvas的交互结果。canvas重绘:在canvas有交互操作时,先清空画布,将canvas中所有的元素都重新画到画布上;var

(1/2)Canvas的交互&存为图片-基本篇

前言公司的产品同学看到朋友圈疯传的这场图后。一拍脑袋,决定做个H5版本的来推广一波。需求如下:文字变成可以点击的,而且还要能够变色(闪瞎有木有)中间的姓名换成用户的微信头像点击button后,将canvas的操作结果保存成图片,来现微信长按保存到本地的功能。难点总结:页面元素canvas基本的api画到画布上(要解决显示自适应的问题);如何实现点击canvas,识别点击文字