Canvas

第二个园

//获取画布元素

letcanvas=document.getElementById("square");

//获取绘制2D元素上下文

letcontext=canvas.getContext("2d");

//设置填充颜色为红色

context.fillStyle="#f00";

//填充一个正方形

context.fillRect(10,0,10,10);

//开始一条路径

context.beginPath();

//从100,100开始定义一条新的子路径

context.moveTo(100,100);

//从100100到200200绘制一条线段

context.lineTo(200,200);

//从200200到100200绘制一条线段

context.lineTo(100,200);

//从100200到100100绘制一条路径

context.lineTo(100,100);

//绘制边

context.stroke();

//进行填充

context.fill();

以五边形为例子，

varcanvas=document.getElementById("square");

varcontext=canvas.getContext("2d");

//绘制一个以100,100为中心，半径为20的柜子N变形，每个定点均匀分布在圆角上，第一个定点放置在最上下

//偏转角度为0

//开始定义一条子路径

context.moveTo(100+20*Math.sin(0),100-20*Math.cos(0));

//计算两个顶点之间夹角

//其中2π为一个园，除以边数，得到需要旋转的角度

vardelta=2*Math.PI/5;

console.log(delta);

//循环剩余每个顶点

varangle=0;

for(vari=1;i<5;i++){

//角度累加

angle+=delta;

//通过旋转绘制下一个顶点，不断的旋转绘制

context.lineTo(100+20*Math.sin(angle),100-20*Math.cos(angle));

}

//最后一个顶点和起点进行连接

context.closePath();

//从新开始一条新路径

同理，画圆

vardelta=2*Math.PI/500000;

for(vari=1;i<500000;i++){

非零绕数原则

要检测一个点p是否在路径内部，使用非零绕数原则，即，一条从点p出发沿着任意方向无限延伸，或者一直延伸到路径所在的区域外某点的射线，现在从0开始初始化一个计数器，对穿过这条射线的路径进行枚举，每当一条路径顺时针方向穿过射线的时候，计数器加1，逆时针减1，最后，枚举完所有路径以后，如果计时器的值不是0，那么就认为p在路径内，反过来，计数器的值为0，p在路径外。

js根据非零绕数原则确定那个在路径内，那个在路径外，用于进行填充。

可以通过设置画布上下文的fillStyle等属性，设置图形的属性，例如对画布上下文的fillStyle的属性进行设置，即，可以设置出填充时的颜色，渐变，图案等样式。

对于canvas来说，每次获取上下文对象的时候，都会返回同一个上下文对象，即，上下文对象为单例的。

还可以使用save方法，把当前的状态，压入已经保存的栈中，调用restore方法，把状态进行恢复，即弹栈。

画布的默认的坐标系为左上角的坐标原点(0,0)，右边数值大，下数值大，使用浮点数指定坐标，但不会自动转换为整数，会用反锯齿的方式，模拟填充部分元素。

画布尺寸不能随意改变，对任意属性进行操作，都会清空整个画布。

每一个点的坐标都会映射到css像素上，css像素会映射到一个或多个设备像素。

画布中的特定操作，属性使用默认坐标系。

画布还有当前变换矩阵。

画布还有当前变换矩阵，当前变换矩阵作为图形状态的一部分。矩阵定义了当前画布的坐标系。

画布的操作会把该点映射到当前的坐标系中。

坐标变换

当调用c.translate(dx,dy)方法的时候，会进行如下变换

x'=x+dy;

y'=y+dy;

缩放

如要进行缩放，进行的是如下的变换

x'=sx*x;

y'=sy*y;

进行旋转操作，进行的是如下变换

x'=x*cos(a)-y*sin(a);

y'=y*cos(a)-x*sin(a);

如果要先变换再伸缩，进行如下变换

需要先把现有坐标系映射成为坐标系中的点x’，y'然后再变换到x‘’，y‘’

x''=sx*x+dx;

y''=sy*y+dy;

如果变换顺序相反进行如下变换

x''=sx*(x+dx);

y''=sy*(y+dy);

这种变换称为仿射变换，并且仿射变换会修改点的距离和线段间的夹角。对于平行线来说，仿射变换也会保持平行。仿射变换用6个参数描述成为如下表述

x'=ax+cy+e;

y'=bx+dy+f;

通过传入参数实现仿射变换

//通过坐标变换实现科赫雪花

//开始绘制子路径

//继续绘制

//进行绘制边

context.translate(200,200);

已经绘制的图形不会进行改变，改变的是已经绘制的图形

//当前状态入栈

functionleg(n){

//保存状态

context.save();

//递归画

if(n==0){

context.lineTo(50,0);

}else{

//定义为v字型

context.scale(1/2,1/2);

//递归第一条

context.rotate(60*(Math.PI/180));

leg(n-1);

context.rotate(-120*(Math.PI/180));

//坐标恢复变换

context.restore();

//恢复下一个坐标为0,0

context.translate(50,0);

context.moveTo(50,50);

//绘制第一条

leg(1);

绘制一些常见的图形

//工具函数，角度转弧度

functionrads(x){

returnMath.PI*x/180;

//绘制园

context.arc(100,100,40,0,rads(360),false);

同理绘制贝塞尔曲线也是同理。

绘制一个渐变

需要使用createLinearGradient获取一个进行渐变的上下文，对这个上下文进行处理。然后其颜色设置为这个渐变的上下文，即，fillStyle属性。

封顶

对于线段，有三种封顶方式，即，butt，square，round

在绘制图形以后，会参数尖角，圆角，平角，三种。

lineCap属性

和css类似，基线问题。

直接调动clip即可，当前路径也会被裁剪进入，路径外的统统不会显示。

设置shadow属性即可

画布API支持位图图片，同时也支持canvas导出成为图片。

//创建一个img元素

letimg=document.("img");

//设置src属性

img.src=canvas.toDataURL();

//追加到文档后面

document.body.(img);

一些api不在阐述

调用getImageDate方法返回ImageDate对象

使用createImageDate()可以创建像素容器

进行动态模糊先获取像素的ImageDate对象，然后再获取该对象的data属性，该data为一个数组。为一个维数组。每四个元素代表红色分量，绿色分量，蓝色分量，透明度分量。（Alpha分量）

其色素直为0-1，即，数组元素中保存的数组为色素值。

每四个每四个元素遍历。然后把其色素值的1/n+上一个色块的m/n然后赋值给新的色块，代码如下