从简单的基本图形,到复杂炫酷的动画,通过canvas元素获取的2D图形渲染上下文CanvasRenderingContext2D,能够使用丰富的API来进行图形绘制。这篇文章将会总结在之前的canvas教程中用到的所有渲染上下文的API。
可以参考之前的教程:
如何绘制基本图形可以参考:canvas基本图形绘制
如何对基本图形移动旋转缩放可以参考:canv……继续阅读 »
悠悠
7年前 (2018-03-07) 4437浏览 0评论
3个赞
经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢?
如何绘制基本图形可以参考:canvas基本图形绘制
如何对基本图形移动旋转缩放可以参考:canvas图形变换
如何设置基本图形颜色和样式可以参考:canvas样式和颜色
如何使用外部图片以及图形组合可以参考:canvas使用图片,图……继续阅读 »
悠悠
7年前 (2018-03-05) 3985浏览 0评论
33个赞
通过前面的章节,我们能够在canvas画出各种炫酷多样的图形,但是这些画好的图像如何保存下一次使用呢?这篇文章将会探讨如何保存和加载canvas画布上的图像。
如何绘制基本图形可以参考:canvas基本图形绘制
如何对基本图形移动旋转缩放可以参考:canvas图形变换
如何设置基本图形颜色和样式可以参考:canvas样式和颜色
如何使用外部图片以及图形组合……继续阅读 »
悠悠
7年前 (2018-03-02) 6562浏览 0评论
6个赞
这篇文章将会介绍如何在canvas中对绘制的基本图形进行移动,旋转,缩放等变形方法,还会介绍如何在canvas中加载图像,图形之间的组合方式以及裁剪。
如何绘制基本图形可以参考:canvas基本图形绘制
如何对基本图形移动旋转缩放可以参考:canvas图形变换
如何设置基本图形颜色和样式可以参考:canvas样式和颜色
canvas系列教程可以参考:can……继续阅读 »
悠悠
7年前 (2018-03-02) 11231浏览 0评论
13个赞
这篇文章将会介绍如何在canvas中对绘制的基本图形进行移动,旋转,缩放等变形方法,还会介绍如何在canvas中加载图像。
状态的保存和恢复
为了在变形之后,能够将图形恢复原样,需要保存图形的原有状态:
save() restore保存和恢复canvas状态,都没有参数。
可以调用任意多次save方法
每一次调用restore方法,上一个保存的状态就从栈中……继续阅读 »
悠悠
7年前 (2018-03-02) 4565浏览 0评论
4个赞
在上一篇文章中,我们可以通过canvas绘制基本的图形,这些图形的颜色都是默认的,这篇文章将会介绍如何设置图形的颜色行样式,使得绘制的图形更加炫酷!
色彩 Colors
通过设置canvas上下文的两个颜色属性,可以给绘制的图形上色:
fillStyle = color 设置图形的填充颜色
strokeStyle = color 设置图形轮廓的颜色
……继续阅读 »
悠悠
7年前 (2018-03-01) 5176浏览 0评论
2个赞
概述
我们可以通过HTML中的canvas画布画出丰富多彩的图形甚至动画,你只需要:
在HTML中放置一个canvas标签
在HTML的JavaScript代码中获取这个canvas标签元素
通过获取的canvas元素,获取一个渲染上下文
通过获取的渲染上下文可以在画布上任意挥洒图画
另外需要注意的是,并不是所有浏览器都支持 canvas 元素,所以需要……继续阅读 »
悠悠
7年前 (2018-03-01) 6485浏览 0评论
5个赞
Number 问题
下面的问题你都能回答对了吗?
0.1 + 0.2 == 0.3 成立吗?(不成立)
.e-5 表示多少?(0.00001)
怎么表示8进制?(098)
怎么转换进制?(使用toString和parseInt)
如何将字符串转换成数值或整数?反过来呢?十六进制又怎么处理?(parseInt)
parseInt(0x12, 16) 的返回值……继续阅读 »
悠悠
7年前 (2018-02-06) 3745浏览 0评论
4个赞
安装配置
Node.js 官网安装包以及源码下载地址:https://nodejs.org/en/download/
Windows安装包
进入Node.js官网下载首页,选择Windows Installer(.msi) 32-bit或者64-bit。
点击下载 msi 的安装包,双击安装,选择安装路径,一路下一步即可,一般会自动配置环境变量。
安装完成之……继续阅读 »
悠悠
7年前 (2018-02-02) 2830浏览 0评论
0个赞
概述
ECMAScript 2015/ES6中有四种相等算法:
抽象相等比较(==)
严格相等比较(===) Array.prototype.indexOf, Array.prototype.lastIndexOf, 和 case-matching
同值零: 用于 %TypedArray% 和 ArrayBuffer 构造函数、以及Map和Set操作, ……继续阅读 »
悠悠
7年前 (2018-01-30) 2913浏览 0评论
0个赞