摘要: 在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的。 立即绘制图形方法仅有两个strokeRect(),fillRect(),两个方法都是用来绘制矩形的。 Canvas的API提供了如下三个方法,分别用于矩形的清除,描阅读全文
posted @ 2017-07-31 15:45 beevesnoodles 阅读(172) 评论(0) 编辑
摘要: 我们在第三节中描述了线段的绘制,其中线段的属性lineWidth是用来改变线段的宽度。让我们来回忆下线宽的用法 上面的代码我们就可以绘制一条宽度为3像素的线段。 上一章我们还提到线宽与像素边界的内容主要为: 如果你在某2个像素的边界处绘制一条1像素宽的线段,那么该线段实际会占据2个像素的宽度; 因为阅读全文
posted @ 2017-07-04 08:42 beevesnoodles 阅读(302) 评论(0) 编辑
摘要: 上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setLineDash(); 下面我们就来看看虚线的绘制方法 语法 参数 segments: 一个Array阅读全文
posted @ 2017-06-21 19:48 beevesnoodles 阅读(394) 评论(0) 编辑
摘要: Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的。 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的,但是文本不算是图形。 基于路径的绘制系统 大多数绘制系统,如:SVG(Scala阅读全文
posted @ 2017-06-18 21:09 beevesnoodles 阅读(214) 评论(0) 编辑
摘要: 上一章内容中我们对canvas元素有了一个初步的认识,在接下来的章节中我们会慢慢学习canvas中图形的绘制;但是在绘制之前我们先来看看canvas中的坐标系统,因为这样我们才能知道绘制的图形放在什么位置。 比如:我们要在canvas画布的(100,100)这个位置绘制一个圆 看到这个要求顿时就懵逼阅读全文
posted @ 2017-06-13 10:49 beevesnoodles 阅读(307) 评论(0) 编辑
摘要: 最近你开始在学习canvas,打算把学习canvas的整个学习过程当中的一些笔记与总结记录下来,如有什么不足之处还请大神们多多指出。 1. canvas介绍 Canvas元素的出现,可以说开启的Web世界绘制动画,图形的大门,其功能非常强大canvas 元素是HTML5中功能最强大的元素,它的能力主阅读全文
posted @ 2017-06-12 09:19 beevesnoodles 阅读(313) 评论(0) 编辑