Canvas系列(11):动画中级 发表于 2019-06-30 | 分类于 Canvas 上一章我们讲了简单的动画是如何绘制的,如果没有看上一章的童鞋,请点这里,本章的内容也是接着上一章的内容,代码也只修改其中部分。 加速运动我上章中,涉及直线的运动,其速度都是恒定的,现在我们做一下加速的运行,同样的我们只给出核心的代码。 123456789101112131415161718//.. ... 阅读全文 »
Canvas系列(10):动画初级 发表于 2019-06-30 | 分类于 Canvas 今天开始就要讲一些进阶的东西了,是不是很兴奋呢? requestAnimationFrame所谓动画其实就是快读绘制图片,由于人的眼睛更不上屏幕绘制的速率,所以看到的就好像连着的一样,也就形成了动画,动画片就是这个原理,canvas中的动画也是这个原理。提到动画就不得不说一个函数了,那就是requ ... 阅读全文 »
Canvas系列(9):其他API 发表于 2019-06-29 | 分类于 Canvas 前面的内容讲了不少Canva的API,这章把剩下的API一讲吧。这个系列中以后基本不糊涉及新的API了,因为,这章完了我们就真的学完了! 阴影Canvas中的阴影和CSS3中的阴影很像,通过本系列课程的学习,估计你已经发现了,CSS3的好多知识和Canvas是相通的。我们直接看一个例子: 1234 ... 阅读全文 »
Canvas系列(8):像素操作 发表于 2019-06-29 | 分类于 Canvas 经常拍照的同学会使用图片处理软件,给自己的照片加上各种效果。图片处理软件也是软件,同样也是由代码写的,那么如何实现图片处理呢,这章我们就探讨一下这个问题。 canvas中像素处理涉及到3个方法,我们先来看一下API吧: 1234567891011121314// 1. 获取ImageDate 参数 ... 阅读全文 »
证明0.999999999...等于1 发表于 2019-06-29 | 分类于 算法 最近看了一本书叫《极简算法史》,非常薄的一本书,里面的内容也是挺有意思的,现在分享一道证明题如何证明无限循环小数0.999999999…等于1,没错是等于1,高数上就是这么写的。 设x = 0.999999999...,那么10x = 9.999999999...。如果我们从10x减去x,可以得 ... 阅读全文 »
Canvas系列(7):形变 发表于 2019-06-22 | 分类于 Canvas CSS3中有一个很重要的点,就是形变。他分为移动,缩放、旋转和倾斜。在Canvas中,形变都是基于坐标做的,所以,并没有直接的API支持倾斜,其它几种都是有独立的API来支持,命名和CSS是一样的。今天我们就看一下这几种吧。 平移平移是最简单的一种形变,我们直接来看一个例子吧: 12345678c ... 阅读全文 »
Canvas系列(6):绘制图片 发表于 2019-06-19 | 分类于 Canvas 我们现在已经可以绘制好多东西了,不过在实际开发中,绘制最多的当然是图片了,这章我们就讲讲图片的绘制。 绘制图片绘制图片的API是drawImage,它的参数有三种情况: 12345678// 将图片绘制在canvas的(dX, dY)坐标处context.drawImage(Image, dX, ... 阅读全文 »
Canvas系列(5):绘制文字 发表于 2019-06-19 | 分类于 Canvas 通过前面的学习,我们已经可以绘制简单的图形了。这篇文章主要讲的是,canvas绘制文字,那我们开始吧。 绘制文字绘制文字的API和之前的差不多,也是分为stroke和fill,一个是描边文字,一个是填充文字,具体API如下,是不是和strokeRect和fillRect挺类似的: 1234567/ ... 阅读全文 »
Canvas系列(4):线条操作 发表于 2019-06-16 | 分类于 Canvas 通过前三章的学习,你几乎可以绘制出任何图形了,但是却不会画一条虚线,也是够惨的。今天的内容很简单,只简绍3个属性和1个方法,准备好了吗? 线条的粗线lineWidth是改变线条的粗线的,默认是一个像素: 123456789101112131415161718context.beginPath(); ... 阅读全文 »
Canvas系列(3):路径与状态 发表于 2019-06-16 | 分类于 Canvas 前两章我们学的是基本图形的描边和填充,学完基本图形绘制以后就会绕不过2个概念就是路径和状态,本章我们看看这一块的内容。 beginPathbeginPath表示开始一个路径,我们在上一章画弧的时候用到过好多次,他的API非常简单: 1context.beginPath(); 开始路径有2层意思, ... 阅读全文 »