HTML5对Canvas,SVG,位置,web存储的支持

分享到:

1)对Canvas的支持

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
JavaScript 使用 id 来寻找 canvas 元素,然后创建 context 对象。
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>
<script type="text/javascript"> 
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
 
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html>
昵    称:
验证码:

相关文档:

  • GZip、deflate和sdch压缩(网摘整理)
    GZip和deflate: gzip是一种数据格式,默认且目前仅使用deflate算法压缩data部分;deflate是一种压缩算法,是huffman编码的一种加强。deflate与gzip...
  • 10款GitHub上最火爆的国产开源项目
    衡量一个开源产品好不好,看看产品在GitHub的Star数量就知道了。由此可见,GitHub已经沦落为开源产品的“大众点评”了。一个开源...
  • HTML5 文档结构元素
    ...
  • python下的MySQLdb使用
    下载安装MySQLdb <1>linux版本 http://sourceforge.net/projects/mysql-python/下载,在安装是要先安装setuptools,然后在下载文件目录下,修改mysite.cf...
  • 解决ie不支持placeholder的问题
    html5的input标签有一个很强大的placeholder属性,可是ie9以下的都不支持(包括ie9).为了解决这个问题。需要自己写js控制 <!DOCTYPEhtml> <h...
  • PhantomJS快速入门
    PhantomJS快速入门 本文简要介绍了PhantomJS的相关基础知识点,主要包括PhantomJS的介绍、下载与安装、HelloWorld程序、核心模块介绍等。由于...
  • HTML5 game engines
    ThefollowingarefewexamplesofgameenginesimplementedwithHTML5andJavaScript: Construct2:OneofthefirstWebGLenabledHTML5gameengines.ExportspurelytoHTML5a...
  • 移动H5前端性能优化指南
    移动H5前端性能优化指南[托尼托尼研究所] 概述 1.PC优化手段在Mobile侧同样适用2.在Mobile侧我们提出三秒种渲染完成首屏指标3.基于第二点...
  • HTML相关网站
    HTML5规范:http://www.w3.org/TR/html5/ http://alistapart.com/ http://www.smashingmagazine.com/ 查找地区代码:http://r12a.github.io/apps/subtags/...
  • 4.1 HTML5 音频
    1.controls自带效果 <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> </head> <body...
  • 自绘制HT For Web ComboBox下拉框组件
    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框...
  • HTML5(。。。。不完整)
    <!DOCTYPEhtml>不区分大小写 <header>、<nav>、<article>、<section>、<sidebar>、<footer> <datalist> <inputlist="...
  • Web 通信 之 长连接、长轮询(long polling) BY:hoojo
    基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交...
  • HTML5基本布局
    HTML4布局 HTML5布局 基本的HTML5文档的模式为: <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="utf-8"> <title>HTML5Demo</tit...
  • JQuery实现密码有短暂的显示过程和实现 input hint效果
    目录: 一、实现目的 二、问题思考 三、解决办法 1、输入用户名 2、输入密码短暂显示 一、实现目的 这几天做项目的时候,客户...
  • Hybrid框架UI重构之路:三、工欲善其事,必先利其器
    上文回顾:Hybird框架UI重构之路:二、事出有因 工欲善其事,必先利其器,事是重构的目标,器是开发环境。 这篇文章将讲述重构时的U...
  • [html5/css3] html5 canvas --绘制变形图形
    <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>html5canvas--绘制变形图形</title> <script> wi...
  • HTML5+JS 《五子飞》游戏实现(一)规则
    很久没写文章了,这个游戏其实已经写了有段时间了,一直没有完善,赶在新年之际,分享给大家。 该《五子飞》游戏,不是平常大家...
  • Qt 5.4正式发布!引入WP,支持HTML5混合开发
    北京时间12月11日消息,Digia全资子公司TheQtCompany在其官方博客上宣布,正式发布Qt5.4,支持HTML5混合开发,引入对于WindowsPhone的支持,以...
  • HTML5学习笔记1
    1.HTML5概述 继html4和xhtml1.0后的超文本标记语言最新版本。最重要的三项技术:html5核心规范(标签元素),CSS3,JavaScript2008年发布,主要...