canvas初体验

section1

canvas简介

• 弧长： l = a（角度） * π / 180;
• canvas不能使用css控制它的宽和高，会让图片拉伸
• 重新设置canvas标签的宽高属性会让画布擦除所有的的内容
• 可以给canvas通过style属性设置其他属性（背景色，边框。。。）

canvas应用

• getContext(‘2d’)（2d绘图）/getContext(‘webgl’)（3d绘图）;得到canvas的上下文对象，相当于得到canvas的控制权，之后便可以通过js在canvas 上画内容了

canvasAPI

moveTo — 设置绘制起点

• 语法: moveTO(x, y);
• 移动画笔到某个位置
• 参数： x y都是相对于canvas盒子的最左上角
• 注意：绘制线段前必须先设置起点，不然会绘制无效

lineTo — 绘制直线

• 语法：ctx.lineTo(x,y);
• 从xy的位置绘制一天直线到起点或者上一个线头点

ctx.beginPath()/ctx.closePath() — 开始路径和闭合路径

• 如果绘制复杂路径，必须使用路径开始和结束，闭合路径会自动把最后的线头和开始的线头连在一起
• beginPath的核心的作用是将不同绘制的形状进行隔离
• 每次执行此方法，表示重新绘制一个路径，跟之前的绘制的路径可以进行分开样式设置和管理

stroke 描边

• ctx.stroke();
• 根据路径绘制线，路径只是草稿，真正绘制必须执行stroke

fill 填充

• ctx.fill()
• 填充，是将闭合的内容填充具体的颜色，默认黑色

路径的一些属性

strokeStyle

• 设置路径的描边样式

fillStyle

• 设置样式的填充样式

以上两个值都可以接受四种颜色设置法，一般先进行设置样式然后进行绘制

lineWidth

• 设置路径的宽度

快速创建矩形

• ctx.rect(x,y,width,height)
• x,y是矩形左上角坐标，width和height都是以像素计
• rect方法只是规划了矩形的路径，并没有填充和描边

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

ctx.strokeRect(x,y,width,height)

• 参数同上，此方法执行完后立即进行stroke绘制

ctx.fillRect(x,y,width,height)

• 参数同上，此方法执行完后立即对当前矩形进行fill填充

绘制圆弧

• ctx.arc(x,y,r,sAngle,eAngle,counterclockwise)
• x,y:圆心坐标 r:半径大小
• sAngle：绘制开始的弧度（不是角度），默认开始角度为圆弧最右边，顺时针方向增大
• eAngel：结束的弧度
• 弧度和角度的转化公式: rad = deg * Math.PI / 180;

绘制文字

在画布上绘制“被填充的”文本(fillText)

• ctx.fillText(text,x,y,maxwidth)
• maxwidth是允许的最大文本宽度，可选

在画布上绘制文本(strokeText)

• ctx.strokeText(text,x,y,max,width)
• 文本默认颜色是黑色

一些文字属性

• font:设置或返回文本内容的当前文字属性
• textAlign: 设置或返回文本内容的当前对齐方式
• textBaseline: 设置或返回在绘制文本时使用的当前文本基线

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

• ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
• img: 目标图片
• sx,sy: 裁剪开始的位置
• swidth，sheight: 裁剪部分的宽高
• x,y：裁剪部分左上角的定位
• width,height: 设置裁剪部分的宽高

方法的重载：方法名相同，参数个数不同

section2

对象的三种创建方法

1. 使用json创建对象

   var gf1 = {
        "age": 18,
        "name": "刘亦菲",
        "sex": "girl",
        showLove: function () {
            console.log("我叫"+this.name+",今年"+this.age);
        }
    }
    var ret = gf1;
    ret.showLove();
   

2. 使用Object对象来创建

   var gf2 = new Object();
        gf2.age = 18;
        gf2.name = "chenyuanyuan";
        gf2.showLove = function () {
            console.log(123);
        }
   

3. 使用构造函数来创建

   function GirlFriend() {
        this.age = 18;
        this.name = "yangmi";
        this.showLove = function () {
            console.log("wolaogongne");
        }
    }
    var gf3 = new GirlFriend();
   

4. 创建对象的终极方法

   • 参数从外部传入
   • 将方法封装到原型中
   • 将所有的方法统一一次性管理到原型对象中
   • 将对象属性的初始化也放到原型中

     function Person(option){
        this._init(option);
    }
    Person.prototype = {
        _init: function (option) {
            this.name = option.name;
            this.age = option.age;
        },
        sayHi: function () {
            alert(this.name);
        },
        sayHa: function () {
            alert("haha");
        }
    }
   

new 的内容实现过程

1. 创建 一个空的对象
2. 将构造函数中的this指向创建出来的空对象
3. 将创建出来的空对象的proto属性指向构造函数的prototype
4. 执行完构造函数之后如果没有return,那么将创建出来的新对象返回

canvasAPI补充

canvas阴影(了解，少用，性能差)

• ctx.shadowColor：设置或返回阴影颜色
• ctx.shadowBlur：设置或返回阴影的模糊级别，大于1的整数，数值越大越模糊
• ctx.shadowOffsetX：设置或返回阴影距离形状的水平距离
• ctx.shadowOffsetY：设置或返回阴影距离形状的垂直距离
• 一般不用，都是用图片替代

设置线性颜色渐变（了解，少用，性能差）

• var clg = ctx.createLinearGradient(x1,y1,x2,y2)
• x1,y1: 起点坐标 x2,y2终点坐标
• 返回一个对象
• clg.addColorStop(x,y)
• x：介于0到1之间的数，表示颜色进行的程度
• y: 颜色

设置圆形颜色渐变 – context.createRadialGradient

• context.createRadialGradient(x0,y0,r0,x1,y1,r1);
• 分别设置两个圆的圆心和半径

####变换(重要)：缩放、平移、旋转

缩放 – scale

• scale(x,y)
• x:水平方向的缩放值
• y:水平方向的缩放值
• 缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
• 只影响缩放后的内容，对缩放前的内容没影响

平移 – translate

• translate(x,y)
• x:水平方向的位移
• y:垂直方向的位移
• 平移的是坐标原点的距离
• 平移后的内容都是以平移之后的原点为准的

旋转 – rotate

• rotate(angle)
• 参数是弧度
• 如果需要将弧度转化为角度，使用公式: l(弧度) = a(角度) * Math.PI / 180;

保存和回退画布环境 ctx.save() & ctx.restore()

• ctx.save(): 保存画布环境
• ctx.restore(): 回退画布环境
• 一般配合画布位移使用
• 可以多次保存，也可以多次回退，但是回退都是不可逆的
• 如果保存了两次，需要回到最初始的画布环境，则也需要回退两次

设置画布环境的透明度 – ctx.globalAlpha

• ctx.globalAlpha = number
• number为0-1之间的数值
• 透明度是全局作用的，对所有的内容都有影响

画布保存base64编码内容（重要）– ctx.toDtaURL()

• toDataURL() 把canvas绘制的内容输出成base64内容
• 语法：canvas.toDataURL(type, encoderOptions);
• type：设置输出的类型，比如image/png、mage/jpeg等
• encoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为： image/jpeg 或者image/webp才起作用。

konva库

Konva的整体概念

• 舞台的概念的引入。整个视图看做是一个舞台 stage
• 舞台中可以绘制很多个层 layer
• layer下面可以有很多的group
• group下面可以有 矩形、图片、其他形状等

Konva的动画系统

tween对象（重点）

• tween可以控制所有数字类型的属性进行动画处理
• to是duitween的简单应用

Animate的应用

• Animation动画，实际上就是浏览器通知开发者进行绘制，并提供当前的时间

回放且循环播放动画

• yoyo属性可以对动画播放完成后，回放当前动画，并持续循环来回切换播放

画线

任务： 自己封装面向对象版本的画矩形和圆形 GET!

section3

dash: [a,b,c,d]

• 参数为两个是时，表示实线和虚线的长度
• 参数为三个时，依次表示实线、虚线、实线的长度
• 参数为四个是，依次类推

Konva的形状添加的层上的顺序不同会导致层级问题

animation

• frame.timeDiff: 得到两帧之间的时间间隔