最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

Canvas

来自W3cplus的Canvas学习系列教程

Canvas学习5:线型

Canvas学习5:线型

rockyxia 2年前 (2017-06-19) 3238浏览

写在前面 在绘制线段一文中,了解到如何在Canvas中绘制线段。虽然使用Canvas中API可以很轻松的绘制出线段,但里面还是有不少的细节需要了解。这篇文章咱们就来了解线段中的线型。 Canvas中的线型主要包括线宽、线段端点和线段连接点三个部分。那么咱们先来了解线宽。 线宽 通过前面的示例,我们不难发现,在Canvas中通过lineWidth属性来定义线段的粗细。我们可以给其明确指定一个value值,在没...

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

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

rockyxia 2年前 (2017-05-26) 2838浏览

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

Canvas学习3:绘制线段

Canvas学习3:绘制线段

rockyxia 2年前 (2017-04-17) 2335浏览

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

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

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

rockyxia 2年前 (2017-03-30) 2692浏览

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

Canvas学习1:Canvas入门准备

Canvas学习1:Canvas入门准备

rockyxia 2年前 (2017-03-27) 2757浏览

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