Airen的博客

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()两个方法的一些理解。

Canvas学习:线型

绘制线段一文中,了解到如何在Canvas中绘制线段。虽然使用Canvas中API可以很轻松的绘制出线段,但里面还是有不少的细节需要了解。这篇文章咱们就来了解线段中的线型。Canvas中的线型主要包括线宽线段端点线段连接点三个部分。那么咱们先来了解线宽。

Canvas学习:绘制虚线和圆点线

上一节中,使用moveTo()lineTo()stroke()可以很轻易的在Canvas中绘制出实线(线段)。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇,那么要在Canvas中绘制虚线和圆点线又要怎么绘制,在Canvas有没有类似的API能直接绘制呢?其实我也很好奇,看了一些资料,要像绘制实线那样简单或者直接,相对来说是没有的,但不用担心,通过其他的方法也是可以实现的。因为JavaScript是一门万能的语言,那么接下来的内容,就来看看如何在Canvas中绘制虚线和圆点线。

Canvas学习:绘制线段

在上一篇介绍Canvas坐标系统的结尾处,我们使用了Canvavs绘制了一个网格。整个效果是由直线和文本构成。在这一节中,我们来看看如何使用Canvas绘制线段。在Canvas中,线段也是路径中的一种,被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)lineTo(x,y)stroke()几个方法。

Canvas学习:Canvas里的坐标系统

上一节我们做好了使用Canvas的准备工作,但并没有深入的介绍如何使用Canvas,比如怎么绘制图形,怎么做Canvas动画等。但并不用着急,随着我们后面的深入学习,这一切都会知道的。在深入学习之前,我们有必要先了解Canvas里的坐标系统。那么这一节,就先来了解Canvas的坐标系统。

Canvas学习:Canvas入门准备

由于工作的需要,最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处,还请大婶们多多指正。今天这篇文章是学习canvas的一些准备工作。

【转载】你所不知道的setInterval

在《你所不知道的setTimeout()》记载了setTimeout()相关,此篇则整理了下setInterval();作为拥有广泛应用场景(定时器,轮播图,动画效果,自动滚动等等),而又充满各种不确定性的这setInterval(),自当先洞悉它,才能很好的驾驭它。

text-stroke实现文本描边效果

早期在Web中要实现文本描边效果是没有直接的CSS属性可以实现的。一般都是通过其他的CSS属性来模拟需要的描边效果。最常见的就是使用text-shadow。当然,在SVG或者Canvas中实现文本描述效果相对而言是要较为轻松。那么今天咱们就来看看如何在Web中实现文本描述效果。

页面

返回顶部