在开发移动端 web 或者webapp时，使用百度地图 API 的过程中，经常需要通过手机定位获取当前位置并在地图上居中显示出来，这就需要用到html5的地理定位功能。 代码如下: navigator.geolocation.getCurrentPosition(callback); 在获取坐标成功之后会执行回调函数 callback; callback 方法的参数就是获取到的坐标点；然后可以初始化地图，设置控件、中心点、缩放等级，然后给地图添加point的overlay： 代码如下: var map = new BMap....
上一篇介绍了html5标签video（播放器）初始化需要做的一些工作，如何简单快速使用html5的播放器，本文将重点介绍如何用JS来操作video标签，也就是如何对video做一些简单基本的操作，包括了播放器的播放、暂停，音量的读取、设置等写相关操作，从而开始播放器的扩展之路。 本文的目录： 1.获取影片总时长2.播放、暂停3.获取影片已播放时间和设置播放点4.音量的获取和设置 第一、获取影片总时长 对播放器（video）操作，首先要得...
HTML5 Canvas 提供了很多图形绘制的函数，但是很可惜，Canvas API只提供了画实线的函数(lineTo)，却并未提供画虚线的方法。这样的设计有时会带来很大的不便，《JavaScript权威指南》的作者David Flanagan就认为这样的决定是有问题的，尤其是在标准的修改和实现都比较简单的情况下 (“…something that is so trivial to add to the specification and so trivial to implement… I really think you’re mak...
代码如下: var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("2d"); cxt.beginPath(); cxt.moveTo(250,50); cxt.lineTo(200,200); cxt.lineTo(300,300); cxt.closePath();//填充或闭合 需要先闭合路径才能画 //空心三角形 cxt.strokeStyle="red"; cxt.stroke(); //实心三角形 cxt.beginPath(); cxt.moveTo(350,50); cxt.lineTo(300,200); cxt.l...
近有在学习html5中video标签（播放器）的使用，这里做一些学习笔记，方便自己查阅和记录，本文是第一篇，将介绍的是使用该标签初始化该做的哪些工作。 网上的教程其实也不少了 w3cschool里面的最为简单而详细，那么这几介绍的是一些更为直接的应用。 本文目录: 1.使用标签2.加上一些必要参数3.自动播放或自动加载4.规范播放器 第一步：使用标签 使用的方法很简单，就是一句代码：代码如下: 第二步：加上一些必要的参数，比如播放...
百度百科：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使...
这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题，非常简单。代码如下: var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("2d"); //画一个空心圆 cxt.beginPath(); cxt.arc(200,200,50,0,360,false); cxt.lineWidth=5; cxt.strokeStyle="green"; cxt.stroke();//画空心圆 cxt.closePath(); //画一个实心圆 cxt.beginPath(); cxt.arc(2...
在HTML页面的中，可以用像下面的代码来添加标签：代码如下: Your browser does not support HTML5 Canvas.译注：对于canvas，以下写法是不允许的：代码如下: 让我们来看一下上述代码到底做了些什么。标签有3个主要的属性，包括： 1.id。我们可以在JavaScript代码中用id值来引用该标签。在上述代码中，id值为canvasOne。2.width。canvas的宽度，以像素为单位。在上述代码中，width值为500个像素。3.height。canvas的高度，以像素为单...
代码太简单了，就不废话了 代码如下:var canvas=document.getElementById("canvas"); //设置绘图环境 var cxt=canvas.getContext(2d); //开启新路近 cxt.beginPath(); // 设置笔触的宽度 cxt.lineWidth=10; //设置笔触的颜色 cxt.strokeStyle="#00ff00"; //设定笔触的位置 cxt.moveTo(20,20); //设置移动的位置 cxt.lineTo(100,20); //画线 cxt.stroke();//这个时候的线已经出来了 /...
以前用canvas画图时，都是直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在里，看看会有什么不同。自己试了以下，果然有问题。 先看一下代码：代码如下:canvas body{margin:0;} canvas{margin:20px; /*width: 400px; height: 300px;*/ } function draw() ...
这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。HTML代码：XML/...
前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。 标签的属性代码如下:src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 html 代码代码如下: //audio和vi...
代码如下:var clock=document.getElementById("clock"); var cxt=clock.getContext("2d");function drawNow(){ var now=new Date(); var hour=now.getHours(); var min=now.getMinutes(); var sec=now.getSeconds(); hour=hour>12?hour-12:hour; hour=hour+min/60; //表盘(蓝色) cxt.lineWidth=10; cxt.strokeStyle="blue" cxt.beginPath(); cxt.arc(250,250,200,0,360,false); cxt.closeP...
本文实例分析了HTML5中drawImage使用时遇到的问题及解决方法。分享给大家供大家参考。具体分析如下： 使用Image遇到的问题：代码如下: $(function() { var jsCanv = document.getElementById("canv"); var oCanv = jsCanv.getContext("2d"); var img = new Image(); img.src = "img.png"; oCanv.draw...
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “Testing to See Whether the Browser Supports Canvas”. 在获取HTML页面上Canvas元素的引用后，我们需要测试一下该元素是否包含“上下文”(context)。Canvas的上下文指的是由浏览器定义的用于绘画的平面。简单地说，如果上下文不存在的话，Canvas也就名存实亡了。测试浏览器是否支持Canvas有好几种方法。第一种方法是检查HTML页面中Canvas元素的getCo...