HTML5

Canvas学习:绘制文本

前面的课程我们学习的都是如何在Canvas中绘制图形,但很多时候,除了绘制图形之外还有很多情景要同文本打交道。不过在Canvas中到目前为止只提供了一些必备的基本功能,例如文本的描边与填充,向Canvas之中放置文本,以及用像素为单位来计算任意字符串的宽度等。接下来的内容,我们就来了解在Canvas中怎么绘制文本以及一些基本的操作。

Canvas学习:封装Canvas绘制基本图形API

到今天这节是有关于在Canvas中绘制图形部分的最后一篇文章。从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法,我们可以很轻松的绘制出一些基本图形,比如直线、弧线、矩形、圆形、三角形等。但有很多基本图形的绘制是没有现成的方法,需要通过CanvasRenderingContext2D对象中的属性和方法组合在一起才能绘制出来,比如说点划线、箭头和正多边形等。为了更好的帮助大家在Canvas中绘制这些基本图形,可以将这些基本图形的绘制封装起来。今天这篇文章,我们主要来看看怎么将这些函数封装。

Canvas学习:自定义的坐标变换

相对于Web坐标系统而言Canvas里的坐标系统较为复杂一些,除了默认的坐标系统之外还有坐标变换概念。在上一节中,已经了解了如何使用scale()rotate()translate()方法来变换坐标系。这三个方法提供了一种简便的手段,用于操作绘图环境对象的变换矩阵(Transformation Matrix)。默认情况下,这个变换矩阵就是单位矩阵(Identity Matrix),它并不会影响所要绘制的物体。当调用了scale()rotate()translate()方法之后,变换矩阵就会被修改,从而也会影响到所有后续的绘图操作。

Canvas学习:坐标变换

Canvas里的坐标系统一节中,了解到Canvas的坐标系统如下图所示,它以Canvas画布的左上角为原点(也就是(0,0)),x坐标向右方增长,而y坐标则向下方延伸。然而,Canvas的坐标系统并不是一尘不变的。可以对Canvas坐标系统进行移动旋转缩放等操作。而这些操作被称为坐标变换

Canvas学习:绘制正多边形

到目前为止,我们了解了如何在Canvas中绘制线段矩形圆或圆弧线贝塞尔曲线等。这些都是Canvas的CanvasRenderingContext2D对象自身提供绘制基本图形。但是,我们肯定需要在Canvas中绘制除此之外的其他图形,比如前面所说的绘制箭头或者说我们今天要聊的绘制正多边形。

Canvas学习:贝塞尔曲线

绘制圆和圆弧一节中,了解到在Canvas中可以使用arc()arcTo()绘制制圆或弧线,但很多时候,仅这两个方法还不能满足我们实际的需求,特别是绘制复杂的曲线。不过值得庆幸的是,在Canvas中还提供了其他的方法可以帮助我们绘制复杂的曲线。那就是我们今天要说的贝塞尔曲线,在Canvas中提供了两个独立的方法:quadraticCurveTo()bezierCurveTo()方法。这两个方法就是贝塞尔曲线

Canvas学习:绘制箭头

在这篇文章中主要来聊在Canvas中怎么绘制箭头。在Canvas的CanvasRenderingContext2D对象中是没有提供绘制箭头的方法,言外之意,在Canvas中要绘制箭头是需要自己封装函数来处理。那今天的主题就是来看怎么封装绘制箭头的函数。

Canvas学习:绘制圆和圆弧

圆和圆弧是图形中基本图形之一,今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制线段矩形一样的简单。在Canvas中,CanvasRenderingContext2D对象提供了两个方法(arc()arcTo())来绘制圆和圆弧。

Canvas学习:绘制矩形

通过前面教程的学习,我们可以在Canvas中轻易绘制路径(线段)。这仅仅是Canvas中的一小部分,今天我们来看看在Canvas中怎么绘制矩形。

Canvas学习:save()和restore()

本来今天想开始学习怎么在Canvas中绘制矩形。但昨天发朋友圈,聊到Canvas。有网友提醒我将所有绘制的东西放在ctx.save()ctx.restore(),能起到保存绘制状态和防止污染状态栈。养成一个良好的习惯。后来翻了书,也只是提到了在Canvas中有save()restore()两个方法,它们都是属于Canvas中CanvasRenderingContext2D中与状态操作有关的两个方法。并没有详细的介绍,对于初学者的我而言,也是一知半解。下面的内容记录了我对save()restore()两个方法的一些理解。

页面

返回顶部