本节我们来学习如何创建 Canvas 画布。 标签是 HTML5 中新增的标签,通过使用 JavaScript 中的脚本来绘制图形。在页面上放置一个 canvas 元素,就相当于在页面上放置了一块画布,canvas 元素拥有多种绘制矩形、圆形、字符、路径以及添加图像的方法。
但是我们并不是使用鼠标在画布中画画的哟,其实 标签本身没有绘制图形的能力,它只是一个图形容器,要想在这个容器中绘制图形,则必须使用 JavaScript 脚本来完成。
创建画布
是一个双标签,我们可以通过标签中的 width 和 height 属性来定义画布的大小,这样就会在页面中创建一个隐藏的画布,如果要实际看到这个画布,可任意通过 style 属性为画布添加边框。
示例:
例如定义一个宽高都为 200px ,边框为 2px、实线、黑色的画布:
HTML5学习(9xkd.com)在浏览器中的效果如下:
如果我们没有给 设置宽和高,则会默认 width 为 300px,height 为 150px。CSS 属性也可以用来设置宽和高,但是如果宽高属性和初始比例不一致,会出现扭曲。所以建议不要使用 CSS 中的属性来设置 的宽高。
绘制图像
上面我们讲了 本身是没有绘制图像的能力,如果要绘制图像必须通过 JavaScript 中的脚本来实现。
通常我们需要在 标签中指定一个 id 属性,方便我们能快速的通过标签来找到 canvas 元素。
示例:
例如在创建好的画布中绘制一个蓝色矩形:
HTML5学习(9