html5 Canvas使用方法
在 HTML5 出现之前，游戏和其他多媒体元素是在使用 Flash 的浏览器中提供的。许多基于 Flash 的游戏都可以通过浏览器玩。甚至 Flash 也用于播放视频。就目前我所记得的。没有 Flash Player，我们无法在 Youtube 上播放视频。但在 HTML5 到来之后，一切都变了。
HTML5 带来了许多替代浏览器中的 Flash 的新元素。其中之一是 Canvas。
什么是Canvas？
在现实世界中， Canvas经常用于绘图和绘画。通常你使用铅笔和颜料。
在编程中， 画布 是可绘制代码的元素。
Canvas 是 HTML5 中用于 渲染 图形、图像和文本的新元素。
如何在 HTML 中创建画布
可以使用标签创建 画布<canvas>，不要忘记还提供高度和宽度测量值。
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
</canvas>我们给了一点风格 style="border:1px solid #000000;" 来创造边缘。接下来，我们要使用 DOM API 来操作 画布，通常是这样完成的，
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");document.getElementById("myCanvas") 通过 id 选择 HTML 元素的 函数 myCanvas。此外，变量 ctx（上下文）是 我们可以用来绘制的画布中的一个对象 。完整的代码示例，
<!DOCTYPE html>
<html>
<head>
<meta charsetgoyang dombret="utf-8">
<title>Tutorial HTML 5 Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
</script>
</body>
</html>现在我们有一张空白的 画布 可以用来画画了……
准备好你的想象力并开始用代码绘图。
在画布上绘图
如果在现实世界中我们使用铅笔绘图，那么在 HTML5 画布中我们 使用一个 object ctx。ctx 我们可以把物体 想象成一支铅笔。这个对象有几个 方法 为上绘图 画布 ，如 fillRect()， arc()， fillText()，等我们使用这些方法得出，我们必须确定该点的坐标 x和 y它的。因为画布由一组像素组成，这些像素形成了一个倒置的笛卡尔图。
如何在画布上画点
首先，我们将尝试绘制一个点。
在美术中，点是物体占据空间的最小部分。而在几何数学中，点是0没有长、宽和高的 维度对象。
但在计算机中，一个点是屏幕 1 个像素的大小。
要在画布上绘制一个点，我们可以使用 fillRect() 大小为 1×1 像素的方法。
ctx.fillRect(x,y,1,1);变量 x， y我们用它的坐标值替换，假设我们想在 的坐标上画一个点 (10,10)。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
