HTML5 Canvas实例

HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas 元素都有一个上下文( context )(想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。

下面我们来看一看效果先!

上图深黑色的部分为鼠标所在区域，我们可以看到中间区域变黑。而外边颜色变为绿色。

这一张是鼠标又移动别的地方出现的效果，我们可以明显的看到外边的颜色已经发生变化。它是随着鼠标的移动颜色发生变化的。

这就是今天要说到的HTML 5 canvas。

该例子预览地址：http://html5demos.com/canvas-grad

（仅支持Safari, Firefox浏览器。例子代码可通过浏览器查看源代码获得！）

时间： 2024-09-19 09:01:53

HTML5 Canvas实例的相关文章

本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果.如下图所示: 主要代码如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/T

JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig

JavaScript+html5 canvas绘制渐变区域完整实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&

JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p

JavaScript+html5 canvas制作的百花齐放效果完整实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra

浅析HTML5 Canvas入门教程及实例

什么是 Canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 你可以通过多种方法使用Canva绘制路径,盒.圆.字符以及添加图像. 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 元素. 注意: Internet Explorer 8 及更早 IE

JavaScript+html5 canvas制作的圆中圆效果实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { background:#F2F2F2; height:500px; height:500px; mar

Html5 Canvas画布以及绘制矩形实例

Canvas 标签用来建立一个矩形画布区域,利用 Canvas 提供的 JS 方法来绘制图形,可以对画布的每一个像素进行控制,就类似但不局限于 PHP 的 GD 库. 下面我将分多篇文章系统介绍 Canvas 标签的使用方法,虽然 Canvas 标签实际使用的还是非常少,但在 Html5 普及之后必然是一大趋势,我们先下手为强. 结构 Canvas在HTML页面中是一个"<canvas></canvas>"标签,显示为一个矩形区域.矩形区域的左上角为坐标原点(0