<canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布<button>Click to copy</button>画布，可以用 JavaScript 在上面绘画。控制其每一个像素。可视化数据.数据图表话，比如:百度的 echart
banner 广告：Flash 曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5 技术能够在 banner 广告上发挥巨大作用，用 Canvas 实现动态的广告效果再合适不过。
未来=> 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由 JavaScript 来实现。
未来=> 远程计算机控制：Canvas 可以让开发者更好地实现基于 Web 的数据传输，构建一个完美的可视化控制界面。
未来=> 图形编辑器：Photoshop 图形编辑器将能够 100%基于 Web 实现。
其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与 Web 融合，并且不需要任何插件。
完整的 canvas 移动化应用
我们课程的目标
- 我们不是主要做游戏开发的
- 要求必须会做基本的用 canvas 绘制的特效页面：比如，传智前端官网。
- 会用 canvas 做一些简单的广告、活动页面
我们课程的案例和项目演示
canvas 的标准：
推荐：
安装插件：AndyJS2
github地址： https://github.com/malun666/AndyJS2
直接下载到：X:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages<button>Click to copy</button>例如：
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
</canvas><button>Click to copy</button>var canvas = document.getElementById('cavsElem'); //获得画布
var ctx = canvas.getContext('2d'); //注意：2d小写， 3d：webgl<button>Click to copy</button>canvas 坐标系，从最左上角 0,0 开始。x 向右增大， y 向下增大
* 语法：ctx.moveTo(x, y);
* 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置
* 参数：x,y 都是相对于 canvas盒子的最左上角。
* 注意：**绘制线段前必须先设置起点。**<button>Click to copy</button>* 语法：ctx.lineTo(x, y);
* 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。
* 参数：x,y 线头点坐标。<button>Click to copy</button>* 开始路径：ctx.beginPath();
* 闭合路径：ctx.closePath();
* 解释：如果是绘制不同状态的线段或者形状，必须使用开始新路径的方法把不同的绘制操作隔开。闭合路径会自动把最后的线头和开始的线头连在一起。
* beginPath: 核心的作用是将 不同绘制的形状进行隔离，
每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。<button>Click to copy</button>* 语法：ctx.stroke();
* 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke
* stroke: （用笔等）画；轻抚；轻挪；敲击；划尾桨；划掉；（打字时）击打键盘
英 [strəʊk] 美 [strok]<button>Click to copy</button>html 部分：
<canvas id="cavsElem"> 你的浏览器不支持canvas，请升级浏览器 </canvas><button>Click to copy</button>javascript 部分：
//===============基本绘制api====================
//获得画布
var canvas = document.querySelector('#cavsElem');
var ctx = canvas.getContext('2d'); //获得上下文
canvas.width = 900; //设置标签的属性宽高
canvas.height = 600; //千万不要用 canvas.style.height
canvas.style.border = '1px solid #000';
//绘制三角形
ctx.beginPath(); //开始路径
ctx.moveTo(100, 100); //三角形，左顶点
ctx.lineTo(300, 100); //右顶点
ctx.lineTo(300, 300); //底部的点
ctx.closePath(); //结束路径
ctx.stroke(); //描边路径<button>Click to copy</button>* 语法：ctx.fill();
* 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。
* 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。
以下是非0环绕原则的原理：（了解即可，非常少会用到复杂的路径）
“非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，
使此线段的终点完全落在路径范围之外。
图2-14中的那三个箭头所描述的就是上面这个步骤。
接下来，将计数器初始化为0，
然后，每当这条线段与路径上的直线或曲线相交时，
就改变计数器的值。如果是与路径的顺时针部分相交，则加1，
如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill()方法时，
浏览器就会对其进行填充。
如果最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了
* 案例： 04填充矩形.html<button>Click to copy</button>
* 语法：ctx.rect(x, y, width, height);
* 解释：x, y是矩形左上角坐标， width和height都是以像素计
* rect方法只是规划了矩形的路径，并没有填充和描边。
* 改造案例：04填充矩形.html
*rect: abbr. 矩形（rectangular）；收据（receipt）<button>Click to copy</button>* 语法： ctx.strokeRect(x, y, width, height);
- 参数跟2.3.8相同，注意此方法绘制完路径后立即进行stroke绘制
* 语法：ctx.fillRect(x, y, width, height);
- 参数跟2.3.8相同， 此方法执行完成后。立即对当前矩形进行fill填充。<button>Click to copy</button>* 语法：ctx.clearRect(x, y, width, hegiht);
* 解释：清除某个矩形内的绘制的内容，相当于橡皮擦。<button>Click to copy</button>概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。
rad = deg\*Math.PI/180;案例：05 绘制圆形.html
例如：ctx.font = "18px '微软雅黑'";
例如：ctx.textAlign = 'left';
例如： ctx.textBaseline = 'top'; 单词: alphabetic: 字母的；照字母次序的 [,ælfə'bɛtɪk] ideographic：表意的；表意字构成的 英 [,ɪdɪəʊ'ɡræfɪk] 美 [,ɪdɪə'græfɪk]
* ctx.fillText() 在画布上绘制“被填充的”文本
* ctx.strokeText() 在画布上绘制文本（无填充）
* ctx.measureText() 返回包含指定文本宽度的对象
* 单词：measure 测量；估量；权衡 英 ['meʒə] 美 ['mɛʒɚ]<button>Click to copy</button>//综合案例代码：
ctx.moveTo(300, 300);
ctx.fillStyle = 'purple'; //设置填充颜色为紫色
ctx.font = '20px "微软雅黑"'; //设置字体
ctx.textBaseline = 'bottom'; //设置字体底线对齐绘制基线
ctx.textAlign = 'left'; //设置字体对齐的方式
//ctx.strokeText( "left", 450, 400 );
ctx.fillText('Top-g', 100, 300); //填充文字<button>Click to copy</button>context.drawImage(img,x,y);
参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。<button>Click to copy</button>context.drawImage(img,x,y,width,height);
参数说明：width 绘制图片的宽度， height：绘制图片的高度
如果指定宽高，最好成比例，不然图片会被拉伸</em>
等比公式： toH = Height * toW / Width; //等比
设置高 = 原高度 * 设置宽/ 原宽度;<button>Click to copy</button>context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明：
sx,sy 裁剪的左上角坐标，
swidth：裁剪图片的高度。 sheight:裁剪的高度
其他同上<button>Click to copy</button>第一种方式：
var img = document.getElementById('imgId');<button>Click to copy</button>第二种方式：
var img = new Image(); //这个就是 img标签的dom对象
img.src = '/aicoder_vip_doc/images/arc.gif';
img.alt = '文本信息';
img.onload = function() {
//图片加载完成后，执行此方法
};<button>Click to copy</button>var o = { name: '123', age: 18 }; //json方式创建
var o = new Object(); //通过new的方式创建
var o = new Persion(); //通过类的构造函数创建<button>Click to copy</button> * json的方式： var o = { age: 19 };
* 直接添加属性：var o = {}; o.age = 19;//太分散了，不利于管理
* 由于js动态语言的特性，如果属性不存在的时候，直接添加属性。
* 构造函数添加属性
* 原型添加公共的属性<button>Click to copy</button>JS 的构造函数的原型 构造函数的原型就是：构造对象的模板，构造函数原型里面的所有的属性和方法都会共享给所有的 构造函数构造出来的所有实例。
案例： 08 绘制图片.html
第一步：sublime 菜单栏 → 工具 → 制作代码段
第二步：修改输出的 sublime 代码段文本
<snippet>
<content><![CDATA[
1、这里放要tab键 输出的内容
2、 ${1:this} 占位符，tab可以进行切换，数字是切换的索引。
：后面的是默认的文本。
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>简写的字母</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet><button>Click to copy</button>第三步：保存到插件的文件夹中，后缀名为：.sublime-snippet 比如我存放的位置：
C:\Users\malunmac\AppData\Roaming\Sublime Text 3\Packages\User\snippets
snippets 是我自己新建的文件夹。
以上两个值都可以接受颜色名,16 进制数据，rgb 值，甚至 rgba. 一般先进行设置样式然后进行绘制。
例如：
ctx.strokeStyle = 'red';
ctx.strokeStyle = '#ccc';
ctx.strokeStyle = 'rgb(255,0,0)';
ctx.strokeStyle = 'rgba(255,0,0,6)';<button>Click to copy</button>ctx.fillStyle = 'rgba(255,0,0, .9)';
ctx.shadowColor = 'teal';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillRect(100, 100, 100, 100);<button>Click to copy</button>例如：
案例： 12 设置 box 盒子阴影.html
设置 png 图片的阴影，图片透明部分不会被投影。
//创建线性渐变的对象，
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, 'black'); //添加一个渐变颜色，第一个参数介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
grd.addColorStop(1, 'white'); //添加一个渐变颜色
ctx.fillStyle = grd; //关键点，把渐变设置到 填充的样式<button>Click to copy</button>案例 13 设置线性渐变.html
var rlg = ctx.createRadialGradient(300, 300, 10, 300, 300, 200);
rlg.addColorStop(0, 'teal'); //添加一个渐变颜色
rlg.addColorStop(0.4, 'navy');
rlg.addColorStop(1, 'purple');
ctx.fillStyle = rlg; //设置 填充样式为延续渐变的样式
ctx.fillRect(100, 100, 500, 500);<button>Click to copy</button>var ctx = c.getContext('2d');
var img = document.getElementById('lamp');
var pat = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat; // 把背景图设置给填充的样式
ctx.fill();<button>Click to copy</button>scale() 方法缩放当前绘图，更大或更小context.scale(scalewidth,scaleheight)scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置x： 添加到水平坐标（x）上的值y： 添加到垂直坐标（y）上的值位移画布一般配合缩放和旋转等。
案例： 17 位移画布.html
context.rotate(angle); 方法旋转当前的绘图如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
案例：18 旋转画布.html
ctx.save() 保存当前环境的状态ctx.restore() 返回之前保存过的路径状态和属性 案例1：
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
var img = document.querySelector("#img-demo");//拿到图片的dom对象
img.src = canvas.toDataURL("image/png"); //将画布的内容给图片标签显示<button>Click to copy</button> var canvas1 = document.querySelector('#cavsElem1');
var canvas2 = document.querySelector('#cavsElem2');
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
ctx1.fillRect(20, 20, 40, 40); //在第一个画布上绘制矩形
ctx2.drawImage(canvas1, 10, 10); //将第一个画布整体绘制到第二个画布上<button>Click to copy</button>
lineJoin 设置或返回两条线相交时，所创建的拐角类型
bevel: 创建斜角。 - 翻译. 斜角；斜面；[测] 斜角规 英 ['bev(ə)l] 美 ['bɛvl]
round: 创建圆角。 * miter: 默认。创建尖角
lineWidth 设置或返回当前的线条宽度
quadratic：二次方的意思， 英 [kwɒ'drætɪk] 美 [kwɑ'drætɪk]Curve：曲线的意思， 英 [kɜːv] 美 [kɝv]context.quadraticCurveTo(cpx,cpy,x,y);cpx： 贝塞尔控制点的 x 坐标cpy： 贝塞尔控制点的 y 坐标x ： 结束点的 x 坐标y ： 结束点的 y 坐标
ctx.beginPath();
ctx.moveTo(20,20);
//绘制2次方曲线，贝赛尔曲线
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();<button>Click to copy</button>context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);cp1x: 第一个贝塞尔控制点的 x 坐标cp1y: 第一个贝塞尔控制点的 y 坐标cp2x: 第二个贝塞尔控制点的 x 坐标cp2y: 第二个贝塞尔控制点的 y 坐标x: 结束点的 x 坐标y: 结束点的 y 坐标//绘制复杂的贝塞尔曲线
ctx.beginPath();
ctx.moveTo(400,400);
//参数说明：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
// cp1x： 第一个贝塞尔控制点的 x 坐标
// cp1y： 第一个贝塞尔控制点的 y 坐标
// cp2x： 第二个贝塞尔控制点的 x 坐标
// cp2y： 第二个贝塞尔控制点的 y 坐标
// x: 结束点的 x 坐标
// y: 结束点的 y 坐标
ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);
ctx.stroke();<button>Click to copy</button>
context.arcTo(x1,y1,x2,y2,r); //类比：css3 中的圆角。ctx.arcTo(240, 100, 240, 110, 40);x1: 弧的端点 1 的 x 坐标y1: 弧的端点 1 的 y 坐标x2: 弧的端点 2(终点)的 x 坐标y2: 弧的端点 2(终点)的 y 坐标r : 弧的半径//代码demo：
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
//context.arcTo(x1,y1,x2,y2,r); //类比：css3中的圆角。
ctx.arcTo(240, 100, 240, 110, 40);
ctx.lineTo(240, 300);
ctx.stroke();<button>Click to copy</button>
context.isPointInPath(x,y);
//isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。
//判断x,y坐标的点是否在当前的路径中。<button>Click to copy</button>`context.measureText(text).width;`<button>Click to copy</button>//思考：我们用到的矩形需要哪些绘制的东西呢？
//下面是把上面所有的功能进行封装的代码：
function ItcastRect( option ) {//矩形构造函数
this._init(option);
}
ItcastRect.prototype = { //矩形的原型对象
_init: function( option ) { //初始化方法
option = option || {};
this.x = option.x === 0 ? 0 : option.x || 100;
this.y = option.y === 0 ? 0 : option.y || 100;
this.w = option.w || 100;
this.h = option.h || 100;
this.angle = option.angle === 0 ? 0 : option.angle || 0;
this.fillStyle = option.fillStyle || 'silver';
this.strokeStyle = option.strokeStyle || 'red';
this.strokeWidth = option.strokeWidth || 4;
this.scaleX = option.scaleX || 1;
this.scaleY = option.Y || 1;
},
render: function( ctx ) {//把矩形渲染到canvas中
ctx.save();
ctx.translate( this.x, this.y );//位移画布
ctx.rotate( this.angle * Math.PI / 180 );//旋转角度
ctx.scale( this.scaleX, this.scaleY );//缩放
ctx.fillStyle = this.fillStyle;
ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形
ctx.lineWidth = this.strokeWidth; //线宽
ctx.strokeStyle = this.strokeStyle; //填充样式
ctx.strokeRect( 0,0,this.w,this.h ); //描边样式
ctx.restore();
},
constructor: ItcastRect
};<button>Click to copy</button>//封装圆形的代码的答案：不要偷看
function ItcastCircle(option) {
this._init(option);
}
ItcastCircle.prototype = {
_init: function(option) {
option = option || {};
this.x = option.x === 0 ? 0 : option.x || 100;
this.y = option.y === 0 ? 0 : option.y || 100;
this.w = option.w || 100;
this.h = option.h || 100;
this.angle = option.angle === 0 ? 0 : option.angle || 0;
this.fillStyle = option.fillStyle || 'silver';
this.strokeStyle = option.strokeStyle || 'red';
this.strokeWidth = option.strokeWidth || 4;
this.scaleX = option.scaleX || 1;
this.scaleY = option.Y || 1;
this.opactity = option.opactity || 1;
this.counterclockwise =
option.counterclockwise === true
? true
: option.counterclockwise || false;
this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;
this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;
this.startAngle = (this.startAngle * Math.PI) / 180;
this.endAngle = (this.endAngle * Math.PI) / 180;
this.r = option.r || 100;
},
render: function(ctx) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.scale(this.scaleX, this.scaleY);
ctx.rotate((this.agnle * Math.PI) / 180);
ctx.globalAlpha = this.opacity;
ctx.fillStyle = this.fillStyle;
ctx.strokeStyle = this.strokeStyle;
ctx.moveTo(0, 0);
ctx.arc(
0,
0,
this.r,
this.startAngle,
this.endAngle,
this.counterclockwise
);
ctx.fill();
ctx.stroke();
ctx.restore();
},
constructor: ItcastCircle
};<button>Click to copy</button>https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/<button>Click to copy</button> http://www.egret-labs.org/<button>Click to copy</button>http://threejs.org/<button>Click to copy</button>官网：http://konvajs.github.io/
特点：
* 小巧、使用方便、适合移动端和pc端
* 支持丰富的事件处理操作
* 支持类似JQuery的操作方式（顺带能复习jQueyr）
* 开源，可以随意更改
* 社区更新比较活跃，github托管源码
* 性能也不错<button>Click to copy</button>
