今天要说下 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简略介绍的更多相关文章

  1. 基于jQuery HTML5人物介绍卡片特效

    基于jQuery HTML5人物介绍卡片特效.这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  2. WEB安全番外第二篇--明日之星介绍HTML5安全问题介绍

    一.CORS领域问题: 1.CORS的介绍请参考:跨域资源共享简介 2.HTML5中的XHR2级调用可以打开一个socket连接,发送HTTP请求,有趣的是,上传文件这里恰恰是multi-part/f ...

  3. html5技术介绍

    什么是HTML5 1>网页的5.0版本 1> 2014年才定制完HTML5的标准,历时8年 2> 移动先行 为什么要用HTML5 1> 跨平台 利用HTML5编写的UI界面能运 ...

  4. HTML5基本介绍

    HTML5简介 HTML是互联网上应用最广泛的标记语言.HTML文件就是普通文本+HTML标记,而不同的HTML标记能表示不同的效果.(简单的说HTML是超文本标记语言) HTML5草案的前身名为 W ...

  5. IT兄弟连 HTML5教程 介绍HTML5给你认识 习题

    1.关于HTML5说法正确的是:(C) A.HTML5只是对HTML4的一个简单升级 B.所有主流浏览器都支持HTML5 C.HTML5新增了离线缓存机制 D.HTML5主要是针对移动端进行了优化 2 ...

  6. HTML5页面介绍

    1.<!DOCTYPE html>     文档声明:用于告诉浏览器使用html哪个版本的标准解析页面,此写法代表使用html5的标准去解析 2.<html>     根标签, ...

  7. 【转】西门子数控系统中MMC、PCU、NCU、CCU简略介绍

    转载地址:http://cyj221.blog.163.com/blog/static/34194117201093005526170/ 2010-10-30 01:06:09|  分类: 机械制造 ...

  8. Html5 Canvas介绍

    1. 获取绘图上下文 var mycanvas = document.getElementById('mycanvas'); var context = mycanvas.getContext('2d ...

  9. HTML最新标准HTML5小结

    写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...

随机推荐

  1. 学习总结 JDBC

  2. App交互demo

    Android <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  3. FindResource函数错误代码:1813-找不到映像文件中指定的资源类型 与LoadResource函数错误代码:1812-指定的映像文件不包含资源区域

    HRSRC WINAPI FindResource( _In_opt_  HMODULE hModule, _In_      LPCTSTR lpName, _In_      LPCTSTR lp ...

  4. JS 随机数

    function GetRandomNum(Min,Max){ var Range = Max - Min; var Rand = Math.random(); return(Min + Math.r ...

  5. poj1936_All in All

    时间复杂度O(n) #include <stdio.h> #include <string.h> int main(){ int al,bl,i,j; +]; +]; whil ...

  6. Android IOS WebRTC 音视频开发总结(三七)-- 台湾help

    本文主要介绍上周跟帮一个台湾程序员解决RTC的故事,文章来自博客园RTC.Blacker(更多信息详见www.rtc.help),支持原创,转载请说明出处. 故事是这样的:一个台湾刚毕业的程序员在公司 ...

  7. 对于返回void类型的asyc的异步方法,如何修改,能使用await

    下面是使用WebClinet 获取百度首页的html代码,一般的写法如下: private void Button_Click(object sender, RoutedEventArgs e) { ...

  8. openstack简介

    OpenStack是一个开源的云计算管理平台项目,由几个主要的组件组合起来完成具体工作.OpenStack支持几乎所有类型的云环境,项目目标是提供实施简单.可大规模扩展.丰富.标准统一的云计算管理平台 ...

  9. CentOS 6.4安装AMH面板

    复制以下代码 然后执行 或者下载wget http://amysql.com/file/AMH/3.2/amh.sh; chmod 775 amh.sh; ./amh.sh 2>&1 | ...

  10. 线程池(C#)

    转自:http://blog.sina.com.cn/s/blog_494305f30100ryw7.html 在这里你可以学到Microsoft研究CLR实现线程池的原理机制,从而更灵活的处理CLR ...