51dev.com IT技术开发者社区

51dev.com 技术开发者社区

弹幕制作canvas方法,文字直播和聊天

弹幕制作canvas方法,文字直播和聊天

今天要做体育文字直播的项目,类似这样:文字不断循环显示,我这里找到了一个网上的写法,分析后并贴在这里,并且封装成了jquery barrager方法,很是方便,分析了下原理,是刷新canvas画布实现的,非常好用.后端将数据以接口形式返回给我,我把数据放到$('canvas'...

canvas结合三角函数实现一个视频直播效果

canvas结合三角函数实现一个视频直播效果

canvas可以说是html5其中的一大亮点,有了它,我们可以基于canvas画布实现很多之前只有flash和视频才能实现的效果。废话少说,先上效果。canvas结合三角函数实现一个视频直播效果 *{margin:0;padding:0;}html,body{font-size:0;hei...

HTML5 - 解决数值输入框可以输入字母E的问题(input type=

HTML5 - 解决数值输入框可以输入字母E的问题(input type="number" )

1,问题描述(1)如果页面需要输入常规数值时,我们通常会使用 number 类型的控件。这样浏览器会自动忽略非数值字符。就是说只能输入数字进去。1<input type="number"/>(2)但是我们发现字母 e ...

html5对各浏览器的支持情况

html5对各浏览器的支持情况

考虑到HTML5标准的制定原则:新特性基于HTML、CSS、DOM以及JavaScript;减少对外部插件的需求(比如Flash);独立于设备等,我们选取了HTML5的几项主要特性来评价浏览器系统。视频播放标记video音频播放标记audio绘图标记canvas表单控件标记url、email等本地客...

HTML5网页结构

HTML5网页结构

HTML5的网页结构<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><header>......

使用Canvas绘制虚线和圆点线

使用Canvas绘制虚线和圆点线

上一节中,使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线(线段)。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇,那么要在Canvas中绘制虚线和圆点线又要怎么绘制,在Canvas有没有类似的API能直接绘制呢? 其实我也很好奇,...

HTML5中地图矢量化

HTML5中地图矢量化

我们可以获取canvas对象为varc=document.getElementById("myCanvas");其应有js属性方法如下列举:1:绘制渲染对象,c.getContext("2d"),获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象。...

用HTML和JavaScript写的RSA加密小工具

用HTML和JavaScript写的RSA加密小工具

运用网页设计的方式写了一个RSA小工具有浏览器能看网页的机器上都能用生成RSA密钥:cryptico.browser.js是网上找到的现成代码我只做了一点点修改 <scriptlanguage="JavaScript"type="text/javascript"src="crypti...

基于HTML5 WebSocket,JavaEE 7在线聊天系统

基于HTML5 WebSocket,JavaEE 7在线聊天系统

当今的Web应用在我们的个人生活与商业应用中的各个方面已经表现出愈发重要的作用。这些应用包括社交媒体网络、在线购物、商业应用,乃至家用电器的配置程序。虽然它的增长势头依然迅猛,但Web应用的用户体验与原生应用或桌面应用相比仍然相形见绌,其主要原因是Web应用的设计依赖于单向的HTTP协议。而WebS...

Html5元素及基本语法

Html5元素及基本语法

HTML标签开始标签(openingtag):开放标签结束标签(closingtag):闭合标签 元素定义:HTML元素指的是从开始标签到结束标签的代码(元素以开始标签为起始以借宿标签终止)元素的内容:元素的内容指的是开始标签与结束标签之间的内容元素的特点:1,大多数HTML元素可嵌套(可...

H5全景图-朋友圈全景图-720&#176;全景-VR    -----工具使用

H5全景图-朋友圈全景图-720&#176;全景-VR -----工具使用

其实pano2vr软件的使用,操作很简单的工具:Pano2VR、Firefox、GoogleChrome提示:Pano2VR有破解版有正式版,推荐使用正式版。首先打开Pano2VR熟悉一下界面  大体有这么几个模块:1.输入:导入、设置全景图片2.输出:输出列表、选择输出方式(&...

HTML5拖拽上传图片预览

HTML5拖拽上传图片预览

file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件。file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块。总之,file对象包含与FlieList对象,而fi...

五分钟学会 Canvas 基础(二)

五分钟学会 Canvas 基础(二)

相信各位小伙伴读了之前的文章,对Canvas基础已经有了一定的认识和了解,但是大家也一定记得我在上一篇文章留了一个小的坑。就是我没有告诉大家该如何去绘制圆,之所以没有说是因为绘制圆实际上是因为CanvasRenderingContext2D对象只提供了两个绘制矩形的方法,并没有直接提供绘制圆,椭圆等...

HTML5面向对象的游戏开发简单实例总结

HTML5面向对象的游戏开发简单实例总结

在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子,通过这个例子可以对面向对象的开发进行更深入的理解。这个对象要实现的是:将一个CSSsprite中的图像绘制到canvas中。首先创建一个SpriteSheet对象,代码如下:varSpriteSheet=newfunction(){this....

Flex 布局初学

Flex 布局初学

网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。vcHLy/nT0OSvwMDG97XE1qez1qOs1eLS4s6218WjrM/W1Nq+z...