但是我们并不是利用鼠标在画布中画画的哟,实在 <canvas&gt; 标签本身没有绘制图形的能力,它只是一个图形容器,要想在这个容器中绘制图形,则必须利用 JavaScript 脚本来完成。

创建画布

<canvas&gt; 是一个双标签,我们可以通过标签中的 width 和 height 属性来定义画布的大小,这样就会在页面中创建一个隐蔽的画布,如果要实际看到这个画布,可任意通过 style 属性为画布添加边框。

示例:

html5隐藏canvasHTML5 若何创立Canvas画布 Angular

例如定义一个宽高都为 200px ,边框为 2px、实线、玄色的画布:

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)</title> </head> <body> <canvas width="200px" height="200px" style="border: 2px solid #000;"></canvas> </body></html>

在浏览器中的效果如下:

如果我们没有给 <canvas> 设置宽和高,则会默认 width 为 300px,height 为 150px。
CSS 属性也可以用来设置宽和高,但是如果宽高属性和初始比例不一致,会涌现扭曲。
以是建议不要利用 CSS 中的属性来设置 <canvas> 的宽高。

绘制图像

上面我们讲了 <canvas> 本身是没有绘制图像的能力,如果要绘制图像必须通过 JavaScript 中的脚本来实现。

常日我们须要在 <canvas> 标签中指定一个 id 属性,方便我们能快速的通过标签来找到 canvas 元素。

示例:

例如在创建好的画布中绘制一个蓝色矩形:

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)</title> </head> <body> <canvas id="mycanvas" width="200px" height="200px" style="border: 2px solid #000;"></canvas> <script> var can = document.getElementById("mycanvas"); var ctx = can.getContext("2d"); ctx.fillStyle = "#99CCFF"; ctx.fillRect(50, 50, 100, 100); </script> </body></html>

在 HTML 代码中引用 JavaScript 代码有两种方法,一种是直接在 <script> 标签中书写,还有一种是单独创建一个 .js 文件,然后在 HTML 页面中通过 <script> 标签引入 .js 文件,例如:

<script src="./index.js"></script>

上述代码在浏览器中的演示效果如下:

上述代码中 getElementById() 方法用于返回对拥有指定 ID 的第一个工具的引用,所带参数为指定元素的 id 属性值。

而 getContext() 方法返回一个用于在画布上绘图的环境,参数指定了想要在画布上绘制的类型,当前唯一的合法值为 2d,表示二维绘图。

总结

利用 <canvas> 标签来创建画布实在很大略,比较繁芜的是如何在画布中绘制图形,这涉及到很多属性和方法,我们下一节来详细讲解。