HTML5简略介绍
今天要说下 HTML5特有的一个元素 canvas ,旨在让web页面上作矢量图不需要在依靠flash或是其他插件,在网页上使用canvas元素时,它会创建一块矩形区域,默认300*150,当然也是可以自定义的。Canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标为x=0,y=0的点称为原点。
Canvas的功能虽然很强大,但是如果它实现的效果,和当前HTML5已有的元素实现的效果一样,那当然还是直接使用已有的元素,执行效率上是会快一些的,如果canvas元素不被某些浏览器支持,那canvas就必须要要做好兼容性考虑,在canvas内定义一段替代内容,替代内容可以是一段说明文字或是一张图片。Canvas的一般样式,如边框,边距,都可以使用css语法来定义,其内部添加的文字,样式默认同canvas元素一样。
下面说说canvas API的使用,先从一个例子说起吧,在canvas中绘制一条对角线:先在html中放入一个canvas元素 然后在javascript脚本中开始作线,
function drawDiagonal(){
//取得canvas元素及其绘图上下文
var canvas = document.getElementByIdx_x("diagonal");
var context = canvas.getContext('2d');
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(10,140);
context.lineTo(140,70);
//将这条线绘制到canvas上
context.stroke();
}
window.addEventListener("load",drawDiagonal,true);
效果如下:
虽然比较简单,但是展示了使用HTML5 canvas API的重要流程。首先通过ID 获得canvas访问权,接着定义一个context变量,调用canvas对象的getContext方法,并传入希望使用的canvas类型。代码中调用了三个方法--beginPath、moveTo和lineTo,传入了这条线的起点和终点的坐标。
Canvas的强大功能远不止这些,当然限于篇幅,这里说不了很多,推荐大家一本书《HTML5高级程序设计》写的很详细,适合新手细细品读。
HTML5简略介绍的更多相关文章
- 基于jQuery HTML5人物介绍卡片特效
基于jQuery HTML5人物介绍卡片特效.这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码 ...
- WEB安全番外第二篇--明日之星介绍HTML5安全问题介绍
一.CORS领域问题: 1.CORS的介绍请参考:跨域资源共享简介 2.HTML5中的XHR2级调用可以打开一个socket连接,发送HTTP请求,有趣的是,上传文件这里恰恰是multi-part/f ...
- html5技术介绍
什么是HTML5 1>网页的5.0版本 1> 2014年才定制完HTML5的标准,历时8年 2> 移动先行 为什么要用HTML5 1> 跨平台 利用HTML5编写的UI界面能运 ...
- HTML5基本介绍
HTML5简介 HTML是互联网上应用最广泛的标记语言.HTML文件就是普通文本+HTML标记,而不同的HTML标记能表示不同的效果.(简单的说HTML是超文本标记语言) HTML5草案的前身名为 W ...
- IT兄弟连 HTML5教程 介绍HTML5给你认识 习题
1.关于HTML5说法正确的是:(C) A.HTML5只是对HTML4的一个简单升级 B.所有主流浏览器都支持HTML5 C.HTML5新增了离线缓存机制 D.HTML5主要是针对移动端进行了优化 2 ...
- HTML5页面介绍
1.<!DOCTYPE html> 文档声明:用于告诉浏览器使用html哪个版本的标准解析页面,此写法代表使用html5的标准去解析 2.<html> 根标签, ...
- 【转】西门子数控系统中MMC、PCU、NCU、CCU简略介绍
转载地址:http://cyj221.blog.163.com/blog/static/34194117201093005526170/ 2010-10-30 01:06:09| 分类: 机械制造 ...
- Html5 Canvas介绍
1. 获取绘图上下文 var mycanvas = document.getElementById('mycanvas'); var context = mycanvas.getContext('2d ...
- HTML最新标准HTML5小结
写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...
随机推荐
- 学习总结 JDBC
- App交互demo
Android <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- FindResource函数错误代码:1813-找不到映像文件中指定的资源类型 与LoadResource函数错误代码:1812-指定的映像文件不包含资源区域
HRSRC WINAPI FindResource( _In_opt_ HMODULE hModule, _In_ LPCTSTR lpName, _In_ LPCTSTR lp ...
- JS 随机数
function GetRandomNum(Min,Max){ var Range = Max - Min; var Rand = Math.random(); return(Min + Math.r ...
- poj1936_All in All
时间复杂度O(n) #include <stdio.h> #include <string.h> int main(){ int al,bl,i,j; +]; +]; whil ...
- Android IOS WebRTC 音视频开发总结(三七)-- 台湾help
本文主要介绍上周跟帮一个台湾程序员解决RTC的故事,文章来自博客园RTC.Blacker(更多信息详见www.rtc.help),支持原创,转载请说明出处. 故事是这样的:一个台湾刚毕业的程序员在公司 ...
- 对于返回void类型的asyc的异步方法,如何修改,能使用await
下面是使用WebClinet 获取百度首页的html代码,一般的写法如下: private void Button_Click(object sender, RoutedEventArgs e) { ...
- openstack简介
OpenStack是一个开源的云计算管理平台项目,由几个主要的组件组合起来完成具体工作.OpenStack支持几乎所有类型的云环境,项目目标是提供实施简单.可大规模扩展.丰富.标准统一的云计算管理平台 ...
- CentOS 6.4安装AMH面板
复制以下代码 然后执行 或者下载wget http://amysql.com/file/AMH/3.2/amh.sh; chmod 775 amh.sh; ./amh.sh 2>&1 | ...
- 线程池(C#)
转自:http://blog.sina.com.cn/s/blog_494305f30100ryw7.html 在这里你可以学到Microsoft研究CLR实现线程池的原理机制,从而更灵活的处理CLR ...