本文共 1259 字，大约阅读时间需要 4 分钟。

版权声明

• 本文原创作者：
• 作者博客地址：
• 本文视频教程：

Hello canvas

在HTML5新增了canvas标签用于绘制图形，比如：文本、几何图形、路径、图片等等。该标签和其他HTML标签比起来没有多大的不同，除了指定常见的id、class、style等通用属性外，还可以通过height属性和width属性指定canvas的高和宽。嗯哼，我们先来看一个canvas的入门示例：

运行后效果如下图所示：

这段代码的逻辑很简单：获取canvas标签，然后在canvas中画了一个矩形。但是，请注意：绘制图形的这个操作是谁完成的呢？是画布本身么？不是，而是通过getContext(“2d”)获取到的CanvasRenderingContext2D对象，即代码：

var crc2d = canvas.getContext(“2d”);

CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数。接下来，我们来一起学习CanvasRenderingContext2D的常见用法和操作。

绘制圆形

请看如下示例：

运行后效果如下图所示：

在该示例中利用CanvasRenderingContext2D.arc( )绘制了圆形

绘制文本

请看如下示例：

运行后效果如下图所示：

除了此处使用的fillRect( )之外CanvasRenderingContext2D还提供了strokeText( )方法用于绘制文本。

绘制图片

请看如下示例：

运行后效果如下图所示：

在本示例中使用了.drawImage(image, dx, dy);按照图片原本的大小进行绘制。除此以外，还可以采用方法drawImage(image, dx, dy, dWidth, dHeight);对图片进行缩放绘制；亦可以采用drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);从原图中扣取部分图像进行绘制

绘制世界

本文列举了几种常见的图形绘制，但这仅仅只是CanvasRenderingContext2D的九牛一毛罢了。不论是Android还是HTML5，关于图形的绘制都是一个庞大的体系；毕竟这两个哥们在某种角度来说都是靠UI吃饭的。我们可以在Android里的onDraw( )中画得缤纷绚丽，我们可以用CanvasRenderingContext2D画得灿烂夺目。多想有一天，遇见了马良，我可以借他的神笔，画出一个美好世界。

转载地址：https://it9527.blog.csdn.net/article/details/78541432 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！