HTML <canvas> 标签

2020-3-13 14:31| 作者: admin| 查看: 418| 评论: 0|来自: 蚂蚁部落

HTML5 新增 <canvas> 标签,为绘制图片提供了画布。

但是此标签本身不具有绘图能力,而是需要借助JavaScript实现。

一.添加画布:

所谓添加 "画布" 就是在页面中插入<canvas>标签。

代码片段如下:

[HTML] 纯文本查看 复制代码
<canvas id="canvas"  width="400" height="400"></canvas>

上述代码在页面中插入一个长宽分别为400px的画布。

二.获取画布:

<canvas>标签本身不具有绘制图片的能力,需要借助于JavaScript。

所以首先要通过JavaScript获取<canvas>元素对象。

代码片段如下:

[JavaScript] 纯文本查看 复制代码
let cvs = document.getElementById("canvas");

通过相关方法获取<canvas>元素对象,也就是获取"画布"。

三.绘图环境:

现实中绘画有了画布,还需要画笔或者墨水等工具,权且称这些为绘图环境。

利用<canvas>会话也是如此,也需要获取绘图环境。

代码片段如下:

[JavaScript] 纯文本查看 复制代码
// 获取画布
let cvs = document.getElementById("canvas");
// 获取绘图环境
let ctx = cvs.getContext("2d");

通过getContext()方法获取绘图环境,它提供了各种绘图方法和属性。

特别说明:利用 canvas 绘制的是位图,采用SVG绘制的是矢量图。

四.画布尺寸:

<canvas>标签的默认宽度是300px,高度是150px。

可以通过width和height属性设置<canvas>标签的尺寸,也就是画布的尺寸。

也可以利用CSS设置<canvas>的尺寸,但是两者区别巨大。

具体可以参阅CSS与 canvas 属性设置画布尺寸一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部