Canvas

来自W3cplus的Canvas学习系列教程

Canvas学习4：绘制虚线和圆点线

写在前面 上一节中，使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇，那么要在Canvas中绘制虚线和圆点线又要怎么绘制，在Canvas有没有类似的API能直接绘制呢？ 其实我也很好奇，看了一些资料，要像绘制实线那样简单或者直接，相对来说是没有的，但不用担心，通过其他的方法也是可以实现的。因为J...

Canvas学习3：绘制线段

写在前面 在上一篇介绍Canvas坐标系统的结尾处，我们使用了Canvavs绘制了一个网格。整个效果是由直线和文本构成。在这一节中，我们来看看如何使用Canvas绘制线段。 在Canvas中，线段也是路径中的一种，被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。 先画一条简单的直线 Canvas画一下直线非常的容易。众所周之，...

Canvas学习2：Canvas里的坐标系统

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

Canvas学习1：Canvas入门准备

写在前面 由于工作的需要，最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处，还请大婶们多多指正。 今天这篇文章是学习canvas的一些准备工作。 本教程来自w3cplus.com，著作权归作者所有。 canvas元素 <canvas>也是HTML中的一个元素，可以给这个元素添加一些HTML属性，比如使用width和height...