HTML5 canvas 即HTML5画布,是一个现代浏览器都支持的HTML5非插件绘图的功能,本文将展示如何通过HTML5 canvas API操作canvas元素、绘制图形、改变绘图颜色以及删除图形,让我们开始进入这很酷的新技术的短暂旅行吧。
canvas元素简介
使用canvas元素相当简单,它只是一个单纯的HTML标签,外加宽高两个特性。
<canvas width="500" height="500">
<!-- 在这里插入向后兼容的内容,不支持canvas的浏览器可以解析和显示 -->
</canvas>
上面的代码在页面中插入了一个透明的画布,canvas元素内部的内容可以在不支持canvas功能的浏览器下显示你想给你的用户提供的信息,联想下<noscript>元素就可以。
浏览器支持
很重要的一点就是浏览器对canvas的支持还是相当不错的,所有现代浏览器都支持它,包括最新版的IE9:
Internet Explorer 9.0+
Safari 3.0+
Firefox 3.0+
Chrome 3.0+
Opera 10.0+
iOS 1.0+
Android 1.0+
有趣的是,你可以在IE8以及更低版本的IE浏览器下使用canvas功能,借助ExplorerCanvas 插件。
画布尺寸
当定义canvas元素的尺寸时,最好通过HTML设置它的width和height特性,因为通过CSS设置宽高会导致画布按比例缩放到你设置的值,这背后有它的逻辑原因:在canvas元素的内部存在一个名为2d渲染环境(2d redering context)的对象,所以,通过CSS设置画布尺寸会引起奇怪的效果。
探索2d 渲染环境
我们上面提到的canvas元素只是canvas功能的一部分,另一部分是2d渲染环境,它可以让你实现很酷的看得到的东西。
需要完全理清的是:当你使用canvas,你不是在canvas元素上画图,事实上你是在canvas元素内部的2d渲染环境上。
坐标系统
如果你曾经使用过2d绘图编程语言(比如ActionScript、Processing等),你应该会了解基于屏幕(screen-based)的坐标系统。canvas内部的2d渲染环境并没有什么不同之处,它采用标准的笛卡尔坐标系统,原点位于屏幕左上角,向右移动会增加x坐标的值,向下移动会增加y坐标的值,很容易理解。
通常坐标系统的单位是屏幕的1像素。
操作2d渲染环境
需要利用Javascript提供的API来获取2d渲染环境对象,该方法为:getContext(),看下简单的例子:
<canvas id="csser-com-Canvas" width="500" height="500">
<!-- 向后兼容的内容 -->
</canvas>
<script>
var canvas = document.getElementById("csser-com-Canvas");
var c = canvas.getContext("2d");
</script>
通过调用canvas对象的getContext()方法,c变量就包含了指向2d渲染环境的引用,这意味着你现在已经完成了在画布上绘图的一切准备,接下来可以开始绘图了。
本文来自:http://wjlgryx.iteye.com
分享到:
相关推荐
HTML5 Canvas 初级入门教程 HTML5 Canvas 是 HTML5 中一个非常重要的功能,它允许开发者在浏览器中绘制图形,而不需要使用任何插件。这个功能可以在所有现代浏览器中使用,包括 Internet Explorer 9、Safari 3、...
这个初级入门教程主要涵盖了Canvas的基本概念、使用方式以及一些基本的绘图操作。 首先,Canvas是一个HTML标签,通过`<canvas>`元素在网页中创建一个可绘制的区域。例如: ```html <canvas width="500" height="500...
6. **HTML5的新特性**:HTML5引入了许多新的元素和API,如`<canvas>`用于绘图,`<video>`和`<audio>`用于多媒体播放,`<form>`元素的增强,以及离线存储等。这些特性极大地扩展了HTML的功能。 7. **实际项目实践**...
这个"网页设计必备——html初级教程"包含两个CHM文件:HTML入门与提高.CHM和HTML基础教程.chm,它们将帮助初学者理解并掌握HTML的基本概念和语法。 HTML入门与提高.CHM可能涵盖以下内容: 1. HTML简介:解释HTML的...
本初级教程旨在为初学者提供一个全面的入门指南,帮助理解HTML的基本语法和结构。 一、HTML简介 HTML是由Tim Berners-Lee在1990年创建的,它是一种标记语言,主要用于描述网页的内容和结构。HTML文件由一系列的元素...
本教程面向初学者,旨在提供一个全面的HTML入门指导,帮助新手快速掌握这一关键技术。 第一章:HTML简介 在这一章中,我们将深入理解HTML的基本概念。HTML是由一系列元素组成的,这些元素通过标签来定义,告诉...
"WeX5初级教程"可能还会涵盖如何使用WeX5框架,WeX5是一个基于HTML5的移动应用开发框架,它提供了一套组件化、拖拽式开发工具,使得开发跨平台的移动应用变得更加容易。 在"Html5入门教程素材"中,你可能会找到相关...
- **画布教程**: [http://www.w3school.com.cn/html5/html_5_canvas.asp](http://www.w3school.com.cn/html5/html_5_canvas.asp) - **画布实例**: [http://www.jb51.net/html5/32168.html]...
这个“HTML初级教程”专为入门者设计,旨在帮助初学者快速理解并掌握HTML的基础知识和实践技巧。 首先,HTML的基本结构是由一系列的标签组成的,这些标签告诉浏览器如何呈现网页内容。例如,`<html>`标签定义了整个...
HTML5引入了许多新功能,如离线存储(离线应用)、拖放功能、媒体元素(`<audio>`和`<video>`)、画布(`<canvas>`)、SVG图形以及增强的表单控件等。 通过学习这八个关键知识点,初学者可以快速上手HTML,构建基本...
在这个压缩包中,“oeasy-html5-tutorial-master”可能是一个教程项目的源代码仓库,通常包含了各种示例、练习和讲解,帮助你深入理解这三种语言。 首先,我们来详细了解一下HTML5。HTML(HyperText Markup ...
这个“ThreeJS初级教程”显然是为了帮助初学者入门这个强大的库而设计的。 在学习ThreeJS时,首先需要理解其基本概念。WebGL是一种JavaScript API,允许在HTML5 canvas元素中进行硬件加速的3D图形渲染。ThreeJS是对...
HTML5是目前广泛使用的版本,它引入了许多新特性,如音频和视频元素(`<audio>`和`<video>`),画布(`<canvas>`)用于动态图形,以及离线存储(`localStorage`和`sessionStorage`)等。HTML5还强化了语义化标签,如...
标题“369html5-android”暗示了这个压缩包可能包含与HTML5在Android平台上的应用开发相关的资源或教程。HTML5是超文本标记语言的最新版本,它为Web开发者提供了许多新功能和改进,包括更好的离线存储、多媒体支持...
尽管游戏中的AI被戏称为“Cheap AI”,意味着它的智能水平并不高,仅相当于国际象棋的初级入门水平,但它仍然为玩家提供了一个基本的对战平台。玩家如果在对弈中感到轻松获胜,这可能是由于AI算法还相对简单,没有...
这个"前端基础教程"特别关注的是初级HTML和CSS的学习,适合初学者入门。通过高清PDF版的教程,你可以系统地掌握这两个核心技能。 HTML(HyperText Markup Language)是网页内容的结构标记语言,它定义了网页的各个...
这个“html学习笔记”涵盖了HTML5的基础概念、新特性和实际应用,旨在帮助初级学习者快速入门并掌握这一核心技术。 在HTML5中,许多旧的元素被废弃,同时引入了许多新的元素,这些元素的设计更具有语义化,使得网页...