首页>网页设计教程> HTML教程
全部 Dreamweaver教程 Javascript教程 HTML教程 CSS教程 心得技巧 DHTML教程 网页特效 WEB标准化
HTML教程
  • 使用HTML5 Geolocation实现一个距离追踪器

    使用HTML5 Geolocation实现一个距离追踪器

    HTML5 Geolocation(地理定位)用于定位用户的位置。那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示到页面,这样就简单实现了一个距离追踪器,
    2025-01-29
  • 详解基于canvas的视频遮罩插件

    详解基于canvas的视频遮罩插件

    为一个视频添加一个覆盖物,从而挡住视频某区域,在视频的某一时间段,比如第10到第20分钟不显示划定的这块区域。应用场景包括 遮挡卫视图标 、 遮挡视频右下角广告 、 充当马赛克 等。一个长视频可能包含多个遮罩,每个遮罩有特定的显示时间(在此
    2025-01-29
  • HTML5拖拽功能实现的拼图游戏

    HTML5拖拽功能实现的拼图游戏

    具体代码如下所示:<!--代码如下,最下面给出了我测试用的9张250*250的图片切片--><!DOCTYPE html><html><head> <meta charset=utf-8> <title>drag拖拽</titl
    2025-01-28
  • HTML5轻松实现全屏视频背景的示例

    HTML5轻松实现全屏视频背景的示例

    想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览。那么我告诉你有一款Javascript库正合你意,它就是Bideo.js。特性自动调整:Bideo.js可以根据当前浏览器窗口的大小自动调整视频尺寸
    2025-01-28
  • 基于Canvas+Vue的弹幕组件的实现

    基于Canvas+Vue的弹幕组件的实现

    最近由于项目需要定制化一个弹幕功能,所以尝试使用canvas来开发组件。经过测试在一些低端机的效果也没有明显的卡顿,和大家交流一下弹幕效果功能介绍支持循环弹幕弹幕不重叠支持选择轨道数支持弹幕发送使用npm i vue-barrage参数配置
    2025-01-28
  • 浅谈Html5多线程开发之WebWorkers

    浅谈Html5多线程开发之WebWorkers

    我们都知道,浏览器执行js代码是单线程的,当页面脚步执行时,页面是没办法响应别的的,直到脚步的结束,而这里介绍的WebWorkers就可以改变这一切。WebWorkers是运行在后台的js代码,独立于其他脚本,不会影响页面的性能。我们可以继
    2025-01-28
  • HTML5视频播放插件 video.js介绍

    HTML5视频播放插件 video.js介绍

    video.js是一款很流行的html5视频播放插件。很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8。官网:http://videojs.com/ git&demo :http://files.cnbl
    2025-01-28
  • RSS 2.0 规范

    RSS 2.0 规范

    什么是RSS?RSS是一种网页内容联合格式(web content sydication format)。 它的名字是Really Simple Syndication的缩写。 RSS是XML的一种。所有的RSS文档都遵循XML 1.0规范
    2025-01-28
  • canvas仿写贝塞尔曲线的示例代码

    canvas仿写贝塞尔曲线的示例代码

    天正在等烟雨,而我在等你,啦啦啦,欢迎关注我的简书,今天分享的是原创的canvas仿写贝塞尔曲线方法。具体如下:效果图:html<canvas id=mycanvas width=500 height=500>您的浏览器不支持canvas<
    2025-01-28
  • 使用HTML5和CSS3制作一个模态框的示例

    使用HTML5和CSS3制作一个模态框的示例

    本文介绍了使用HTML5和CSS3制作一个模态框的示例,分享给大家,具体如下:源码示例可能你并不想看我下面的一堆冗长的说明,想直接查看源码或者一个在线示例。下面的链接,是我使用 CSS3 的 transition(过渡),opacity(不
    2025-01-28
  • HTML实现双11抢劵(设定时间打开抢券的页面)

    HTML实现双11抢劵(设定时间打开抢券的页面)

    废话不多说了,直接给大家贴代码了,具体代码如下所示:<!DOCTYPE html><html lang=en xmlns=http://www.w3.org/1999/xhtml><head> <meta charset=utf-8
    2025-01-28
  • 小程序canvas中文字设置居中锚点

    小程序canvas中文字设置居中锚点

    小程序中经常会遇到要生成图片的需求,图片一般会加上用户的头像和昵称之类的,头像只需要把腾讯域名添加到request和download列表中,使用wx.getImageInfo()就可以缓存到本地,成功的回调再添加进canvas中生成图片。如
    2025-01-28
  • canvas学习笔记之绘制简单路径

    canvas学习笔记之绘制简单路径

    1 线段(直线路径)绘制线段一般步骤:moveTo(x,y) 移动画笔到指定的坐标点(x,y)lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y)stroke() 根据当前的画线样式,绘制当前或已经存在的路径2 矩形路径绘制
    2025-01-28
  • canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法

    canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法

    我们要绘制一张图片,内容包括一张背景图和一个动态生成的二维码,前提是背景图是项目本身的静态资源,二维码是服务端动态生成的,二者不在同一域名下。解决办法:把所有图片都重定向同一个域名下:let count = 0;let bgImg = do
    2025-01-28
  • 浅谈关于html5中图片抛物线运动的一些心得

    浅谈关于html5中图片抛物线运动的一些心得

    常见的, 物体/图片做抛物线或者更准确的说是沿贝塞尔曲线运动是H5开发中常见的需求, 那么如何快速的根据设计稿计算出运动路径是开发者首要解决的问题.我这边H5开发常用的设计稿尺寸是640 * 1008, 那么根据这个尺寸解决方案思路如下:1
    2025-01-28