HTML5展望

1.简述API

2.Cavans

e.g.画一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: none;
        }
        canvas {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            margin: auto;
            background: #ececec;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
        // 在此完成任务
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.moveTo(100,100);
        context.lineTo(400,100);
        context.stroke();
        context.moveTo(100,100);
        context.lineTo(100,500);
        context.stroke();
        context.moveTo(100,500);
        context.lineTo(400,100);
        context.stroke();
        };
</script>
</head>
<body>
    <canvas id="canvas" width="800" height="600">注意,浏览器推荐使用Chrome!</canvas>
</body>
</html>

效果如下:

时间: 2024-07-28 14:06:10

HTML5展望的相关文章

HTML5与CSS3实现动态网页

课程目录: 步骤1: 初识HTML5本阶段内容主要涵盖HTML5新增.删除标签.标签属性变化以及HTML5布局知识.通过本阶段学习,大家可以运用HTML5标签轻松实现网页音乐播放器和视频播放器,熟练运用HTML5的语义化标签进行静态网页的开发.1.HTML5标签变化 HTML5文档类型如何定义,有哪些标签,以及如何使用,从整体认识HTML52.HTML5网页布局 传统布局与HTML5网页布局的区别和意义,通过案例讲解如何使用HTML5搭建网页3.HTML5属性变化 了解这些属性带来的好处,加深对

Web前端攻城狮培养计划之HTML5与CSS3实现动态网页

步骤1: 初识HTML5本阶段内容主要涵盖HTML5新增.删除标签.标签属性变化以及HTML5布局知识.通过本阶段学习,大家可以运用HTML5标签轻松实现网页音乐播放器和视频播放器,熟练运用HTML5的语义化标签进行静态网页的开发. 第1课 HTML5标签变化HTML5文档类型如何定义,有哪些标签,以及如何使用,从整体认识HTML5 第2课 HTML5网页布局传统布局与HTML5网页布局的区别和意义,通过案例讲解如何使用HTML5搭建网页 第3课 HTML5属性变化了解这些属性带来的好处,加深对

HTML5未来展望

HTML5未来展望 1)WebGL OpenGL是1992年创建的跨平台3D绘图标准,它已被广泛应用于游戏和计算机辅助设计中,并成为微软direct3D的有力竞争对手. 与其他HTML5元素一样,WebGL将会成为Web平台不可或缺的一部分. 2)设备 Web应用很可能需要访问多媒体硬件,入网络摄像头,麦克风或是已连接的存储设备.为此,HTML5设计了device元素,以便让应用程序访问所连接硬件的数据流. 3)音频数据API 类似于<canvas>与<img>间的关系. 4)触摸

HTML5前景展望

HTML5,被传为Flash 的杀手,是一种用于web 应用程序开发.具有变革意义的网络技术.HTML 5提供了一些新的元素和属性,其中有些是技术上类似<div>和<span>标签,但有一定含义,例如<nav>和<footer>.这种标签将有利于搜索引擎的索引整理.小屏幕设备和视障人士使用.同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记. 除了原先的DOM接口,HTML5增加了更多样化的API

使用 HTML5 WebSocket 构建实时 Web 应用

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.这其中有"Web 的 TCP "之称的 WebSocket 格外吸引开发人员的注意.WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道.Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用,开发人员的手中从此又多了一柄神兵利器.本文首先介绍

总结2015年,展望2016

岁月如梭,光阴似箭.眨眼之间,2015年已过,自己有又老一岁.今年大概是自己走出校园,进入社会后收获最多一年了.这一年里,在领导和同事的帮助下,自己在工作中也慢慢成熟起来,慢慢能在公司中独挡一面:生活中,也获得的漂亮贤惠的妻子,收获了自己的千金.哈哈哈哈,此处略去千字...闲话不多说,下面主要从工作中对自己的2015年做一个总结,以及展望下2016年,计划自己将要在哪些方面提升自己. 还记得年初,不对,好像是2014年的年底,12月份左右吧,自己开始负责公司汽车小版本(汽车汽修美容管理软件)软件

(转) 浅析HTML5在移动应用开发中的使用

(转)浅析HTML5在移动应用开发中的使用 (原)http://www.iteye.com/magazines/67 2012-03-07  来自 UECD.163.com  编辑 wangguo 有38498人浏览 收藏 html5 移动开发 app UI < > 猎头职位: 上海: Junior Product Manager 前言 HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE.Chrome.FireFox.Safari,亦或是新出现的浏览器,谁能达到在移动端对

使用HTML5开发Kinect体感游戏

一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决,吸引了大量玩家参与. 表面上看,这款游戏与其它体感体验无异,实际上,它一直运行于浏览器Chrome下,也就是说,我们只需要掌握前端相应技术,就可以开发基于Kinect的网页体感游戏. 二.实现原理 实现思路是什么? 使用H5开发基于Kinect的体感游戏,其实工作原理很简单,由Kinect采集到玩家及环境数据

2016年度 JavaScript 展望(上)

[编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈现,以下为正文的第一部分.点此阅读第二部分. 在过去的几年间,JavaScript 这种原本用于 Web 浏览器端的脚本语言,越来越多地出现在更广泛的软件应用中.现在,JavaScript 可用作服务器端代码,运行 iOS 与 Android 应用,甚至控制机器人.很难想象还有什么软件生态系统是 JavaSc