canvas 元素用于在网页上绘制图形
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>
<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html>
更多 Canvas 实例
下面的在 canvas 元素上进行绘画的更多实例：
实例 - 线条
通过指定从何处开始，在何处结束，来绘制一条线：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
实例 - 圆形
通过规定尺寸、颜色和位置，来绘制一个圆：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
实例 - 渐变
使用您指定的颜色来绘制渐变背景：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body>
</html>
实例 - 图像
把一幅图像放置到画布上：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>
</body>
</html>
相关推荐
这个“html5——canvas”课程很可能是为了教授如何利用Canvas API来创建一个倒计时钟的实例。在这个教程中，我们将深入探讨HTML5 Canvas以及如何用它来实现倒计时功能。 Canvas是一个基于矢量图形的二维画布，通过...
总结来说，"HTML5学习例子——贪吃蛇"这个资源是一个很好的实践平台，可以帮助我们学习HTML5的Canvas绘图、JavaScript事件处理、DOM操作以及可能的数据存储技术。通过分析和运行源代码，我们可以加深对HTML5新特性的...
HTML5实验室——Canvas世界（源码）easel.js jscex.jscexRequire.min.js JSLINQ.js processing.js Vector2.js Vector3.js
HTML5是下一代网页标准，它的核心特性之一是增强网页的交互性和动态性，而`canvas`元素正是实现这一目标的关键工具。在HTML5中，`canvas`是一个画布，允许开发者通过JavaScript进行图形绘制，创建丰富的动态内容。在...
HTML5的Canvas元素是网页开发中的一个强大工具，它允许开发者在网页上绘制图形，创建动态视觉效果。在这个实例中，我们将深入探讨如何利用Canvas来制作一个太阳、地球和月球三球联动的动画，这涉及到JavaScript编程...
1.3 HTML的基本结构 5 1.3.1 HTML文件的编写方法 5 1.3.2 文件开始标签<html> 7 1.3.3 文件头部标签<head> 7 1.3.4 文件标题标签<title> 7 1.3.5 文件主体标签<body> 7 1.3.6...
在这个"HTML5 canvas仿屏保动态管道"项目中，我们利用canvas元素来模仿经典的Windows屏保——动态管道效果。 首先，让我们了解HTML5 canvas的基础。canvas是一个HTML元素，它提供了一个画布，可以在这个画布上通过...
本书《HTML5 Canvas游戏开发实战》由张路斌（lufy_legend）编写，深入浅出地讲解了如何利用HTML5 Canvas进行游戏开发，结合提供的源码实例，读者可以更直观地学习和理解相关技术。 1. **HTML5 Canvas基础** - ...
HTML5 Canvas是现代网页开发中一种极为重要的图形绘制技术。它允许在网页上绘制图形，通过JavaScript控制图形的绘制细节，让网页不仅仅...通过本书的学习，你将能够利用HTML5 Canvas技术，实现丰富多彩的网页交互内容。
本示例"HTML5——demo"是一个适用于Android平台的HTML5源码项目，它展示了如何在移动设备上运行HTML5应用，为用户带来与原生应用类似的体验。 首先，HTML5引入了许多新的元素，如`<header>`、`<nav>`、`<section>`...
"网页模板——基于html5 canvas绘制发光的圆点动画特效源码.zip"这个压缩包文件提供了一个实例，展示了如何利用Canvas API来实现一个发光的圆点动画特效。以下是关于这个知识点的详细解释。 首先，HTML5的Canvas是...
【标题】中的“网页模板——基于HTML5+Canvas实现炫彩纸屑爆炸碎片特效”表明这是一个使用HTML5和Canvas技术创建的网页模板，其特色在于能够展示一种炫彩的纸屑爆炸碎片效果。这个特效为网页增加了动态视觉元素，...
一个经典的游戏，左右箭头可以控制垫子的移动
学习HTML5 Canvas不仅能提升网页的交互性和视觉表现力，也是迈向现代Web开发的重要一步。这份PDF教程结合实例和实践，相信会是学习Canvas的一个有力资源。通过深入学习和动手实践，开发者可以掌握在浏览器中构建富...
这个"HTML5教程——不错的教材"压缩包提供了一份详细的PDF教程，对于想要学习或深入了解HTML5的初学者来说，是一份非常有价值的资源。 HTML5的主要改进包括以下几个方面： 1. **语义化标签**：HTML5引入了一系列新...
这个“Html5-Canvas 贪吃蛇”项目是利用HTML5的Canvas技术和jQuery库来实现的经典游戏——贪吃蛇。下面我们将详细探讨HTML5 Canvas与jQuery在实现这个游戏中的关键知识点。 1. **HTML5 Canvas基本概念**： - ...
综上所述，这个压缩包中的源码涉及了HTML5 Canvas的高级应用，包括绘图、动画、事件处理、性能优化等多个方面，对于学习和研究HTML5动画技术的开发者来说，这是一个极好的实践案例。通过深入研究和理解这个源码，...
《Sea Wolf-V1.1——canvas+DOM游戏详解》 在Web开发领域，HTML5的引入为游戏开发开辟了新的天地。"Sea Wolf-V1.1"是一款利用HTML5的canvas技术和DOM元素构建的在线游戏，它在原有的基础上增加了诸多新特性，极大地...
这篇“HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）”着重介绍了如何利用Canvas构建经典游戏——俄罗斯方块的基础部分，即色块的绘制与移动。 首先，我们要理解HTML5 Canvas的基本结构。它是一个二维绘图...