Canvas学习:绘制箭头
在这篇文章中主要来聊在Canvas中怎么绘制箭头。在Canvas的CanvasRenderingContext2D
对象中是没有提供绘制箭头的方法,言外之意,在Canvas中要绘制箭头是需要自己封装函数来处理。那今天的主题就是来看怎么封装绘制箭头的函数。
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
在这篇文章中主要来聊在Canvas中怎么绘制箭头。在Canvas的CanvasRenderingContext2D
对象中是没有提供绘制箭头的方法,言外之意,在Canvas中要绘制箭头是需要自己封装函数来处理。那今天的主题就是来看怎么封装绘制箭头的函数。
在绘制圆和圆弧一节中,了解到在Canvas中可以使用arc()
和arcTo()
绘制制圆或弧线,但很多时候,仅这两个方法还不能满足我们实际的需求,特别是绘制复杂的曲线。不过值得庆幸的是,在Canvas中还提供了其他的方法可以帮助我们绘制复杂的曲线。那就是我们今天要说的贝塞尔曲线,在Canvas中提供了两个独立的方法:quadraticCurveTo()
和bezierCurveTo()
方法。这两个方法就是贝塞尔曲线。
到目前为止,我们了解了如何在Canvas中绘制线段、矩形、圆或圆弧线和贝塞尔曲线等。这些都是Canvas的CanvasRenderingContext2D
对象自身提供绘制基本图形。但是,我们肯定需要在Canvas中绘制除此之外的其他图形,比如前面所说的绘制箭头或者说我们今天要聊的绘制正多边形。
在Canvas里的坐标系统一节中,了解到Canvas的坐标系统如下图所示,它以Canvas画布的左上角为原点(也就是(0,0)
),x
坐标向右方增长,而y
坐标则向下方延伸。然而,Canvas的坐标系统并不是一尘不变的。可以对Canvas坐标系统进行移动、旋转和缩放等操作。而这些操作被称为坐标变换。
相对于Web坐标系统而言Canvas里的坐标系统较为复杂一些,除了默认的坐标系统之外还有坐标变换概念。在上一节中,已经了解了如何使用scale()
、rotate()
和translate()
方法来变换坐标系。这三个方法提供了一种简便的手段,用于操作绘图环境对象的变换矩阵(Transformation Matrix)。默认情况下,这个变换矩阵就是**单位矩阵**(Identity Matrix),它并不会影响所要绘制的物体。当调用了scale()
、rotate()
或translate()
方法之后,变换矩阵就会被修改,从而也会影响到所有后续的绘图操作。
到今天这节是有关于在Canvas中绘制图形部分的最后一篇文章。从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D
对象中的属性和方法,我们可以很轻松的绘制出一些基本图形,比如直线、弧线、矩形、圆形、三角形等。但有很多基本图形的绘制是没有现成的方法,需要通过CanvasRenderingContext2D
对象中的属性和方法组合在一起才能绘制出来,比如说点划线、箭头和正多边形等。为了更好的帮助大家在Canvas中绘制这些基本图形,可以将这些基本图形的绘制封装起来。今天这篇文章,我们主要来看看怎么将这些函数封装。
前面的课程我们学习的都是如何在Canvas中绘制图形,但很多时候,除了绘制图形之外还有很多情景要同文本打交道。不过在Canvas中到目前为止只提供了一些必备的基本功能,例如文本的描边与填充,向Canvas之中放置文本,以及用像素为单位来计算任意字符串的宽度等。接下来的内容,我们就来了解在Canvas中怎么绘制文本以及一些基本的操作。
合成是指如何精细控制画布上对象的透明度和分层效果。在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。事实上,它和CSS中的混合模式非常的类似。简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的globalCompositeOperation
操作,可以得到不同的效果。
上一节中学习了Canvas的图像合成,通过图像合成的技术可以轻易的实现类似于刮刮卡的效果,其实除了实现刮刮卡的效果之外,还可以使用这种技术制作类似于探照灯的效果。
通过前面的Canvas学习,了解到在Canvas中绘制图形时,使用strokeStyle
和fillStyle
来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值,比如#fff
、red
之类。其实在Canvas中,除了给strokeStyle
和fillStyle
设置颜色之外,还可以设置渐变色。今天我们要学习的就是Canvas中的渐变知识。