第157天：canvas基础知识详解

目录

一、canvas简介 

1.1 什么是canvas？（了解） 

1.2 canvas主要应用的领域（了解） 

二、canvas绘图基础 

2.0 sublime配置canvas插件（推荐） 

2.1 Canvas标签 

2.1.1 canvas标签语法和属性 （重点） 

2.1.2 浏览器不兼容处理（重点） 

2.2 canvas绘图上下文context 6

2.2.1 Context：Canvas的上下文、绘制环境。（重点掌握） 

2.3 基本的绘制路径（重点） 

2.3.1 canvas坐标系 

2.3.2 设置绘制起点(moveTo) 

2.3.3 绘制直线(lineTo) 

2.3.4 路径开始和闭合 

2.3.5 描边(stroke) 

2.3.7 填充(fill) 

2.3.8 快速创建矩形rect()方法 

2.3.9 快速创建描边矩形和填充矩形 

2.3.10 清除矩形(clearRect) 

2.4 绘制圆形（arc) 

2.5 绘制文字（会使用就可以了） 

2.5.1 绘制上下文的文字属性 （有印象就行了） 

2.5.2 上下文绘制文字方法 

2.5.3 案例07文字绘制.html 

2.6 绘制图片（drawImage） （重点） 

2.6.1 基本绘制图片的方式 

2.6.2 在画布上绘制图像，并规定图像的宽度和高度 

2.6.3 图片裁剪，并在画布上定位被剪切的部分 

2.6.4 用JavaScript创建img对象 

2.6.5 面向对象基础复习补充： 

2.6.6 补充 sublime制作代码段（推荐--已结讲过了） 

三、 canvas进阶 

3.1 Canvas颜色样式和阴影 

3.1.1 设置填充和描边的颜色（掌握） 

3.1.2 设置阴影（了解，少用，性能差） 

3.2 复杂样式（了解） 

3.2.1 创建线性渐变的样式（了解） 

3.2.2 设置圆形渐变（径向渐变） （了解 ）

3.2.3 绘制背景图（了解） 

3.3 变换（重点） 

3.3.1 缩放（重点） 

3.3.2 位移画布（重点） 

3.3.3 旋转（重点） 

3.3 绘制环境保存和还原（重要） 

3.4 设置绘制环境的透明度（了解） 

3.5 画布限定区域绘制（了解） 

3.6 画布保存base64编码内容（重要） 

3.7 画布渲染画布（重要） 

3.8 了解：线条样式（了解） 

3.9 了解贝塞尔曲线（知道有） 

3.9.1 绘制一条二次方曲线。 

3.9.2 绘制贝塞尔曲线（知道有） 

3.10了解创建两条切线的弧（知道有） 

3.11了解判断点是否在路径中（知道有） 

3.12了解文本宽度计算（知道有） 

3.13 如果以后做canvas游戏方向开发深入学习可以扩展内以下容： 

四、 Canvas开发库封装 

4.1封装常用的绘制函数 

4.1.1封装一个矩形 

4.2 第三方库使用 

五、Konva的使用快速上手 

5.1 Konva的整体理念 

5.2 Konva矩形案例 

5.2.1 创建一个矩形： Konva.Rect(option); 

5.3 Konva的动画系统 

5.3.1 tween对象(重点) 

5.3.2 动画to的使用 

5.3.3 Animate的应用 

5.3.4 循环播放动画的实现 

5.3.5 回放且循环播放动画 

5.3.6 进度条案例 

5.3.7 传智官网案例 

5.4 Konva的事件（重要） 

5.5 Konva的选择器 

5.6 饼状图案例 

5.7 柱状图案例 

六、Canvas项目实战 

七、Canvas优化 

 

一、canvas简介

1.1 什么是canvas？（了解）

• 是HTML5提供的一种新标签

<canvas></canvas>

• Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。
• canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
• HTML5之前的web页面只能用一些固定样式的标签：比如p、div、h1等，但有了canvas Web页面可以可以丰富多彩。

1.2 canvas主要应用的领域（了解）

1. 游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。 
2. 可视化数据.数据图表
3. banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
4. 未来=> 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。
5. 未来=> 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
6. 未来=> 图形编辑器：Photoshop图形编辑器将能够100%基于Web实现。
7. 其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
8. 完整的canvas移动化应用
9. 我们课程的目标

• 我们不是主要做游戏开发的
• 要求必须会做基本的用canvas绘制的特效页面：比如，传智前端官网。
• 会用canvas做一些简单的广告、活动页面

1. canvas的标准：

• 最新标准：http://www.w3.org/TR/2dcontext/
• 稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
• 目前来说，标准还在完善中。先用早期的api足够完成所有的应用

二、canvas绘图基础

2.0 sublime配置canvas插件（推荐）

推荐：

    安装插件：AndyJS2

    github地址： https://github.com/malun666/AndyJS2

    直接下载到：X:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages

2.1 Canvas标签

2.1.1 canvas标签语法和属性 （重点）

• canvas：画布油布的意思 ==英 ['kænvəs] 美 ['kænvəs] ==
• 标签名canvas，需要进行闭合。就是一普通的html标签。
• 可以设置width和height属性，但是属性值单位必须是px，否则忽略。
• width和hegiht：默认300*150像素
• 注意：
  • 不要用CSS控制它的宽和高,会走出图片拉伸，
  • 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
  • 可以给canvas画布设置背景色
• ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持
• 只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
• 移动端的兼容情况非常理想，基本上随便使用
• 2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
• 如果浏览器不兼容，最好进行友好提示

2.1.2 浏览器不兼容处理（重点）

    例如：                     

    <canvas id="cavsElem">

        你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本

    </canvas>

• • 浏览器不兼容，可以使用flash等手段进行优雅降级

2.2 canvas绘图上下文context

2.2.1 Context：Canvas的上下文、绘制环境。（重点掌握）

• 上下文：上知天文，下知地理。是所有的绘制操作api的入口或者集合。
• Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的。
• Context对象就是JavaScript操作Canvas的接口。 *使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。

 

1 var canvas  = document.getElementById( 'cavsElem' ); //获得画布
2 var ctx = canvas.getContext( '2d' );//注意：2d小写， 3d：webgl

 

2.3 基本的绘制路径（重点）

2.3.1 canvas坐标系

canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大

 

2.3.2 设置绘制起点(moveTo)

* 语法：ctx.moveTo(x, y);

* 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置

* 参数：x,y 都