JS高级程序设计读书笔记（第十五章 使用Canvas绘图）

canvas元素负责在页面中设定一个区域，然后通过js动态地在这个区域中绘制图形。
 

1. 基本用法

 
1.1 要使用canvas元素，必须先设置其width和height属性，指定绘图区域的大小。出现在开始标签和结束标签中的内容是后备信息，如果浏览器不支持canvas元素，就会显示这些信息。

1.2 要在画布上绘图，需要取得绘图上下文（getContext()）

1.3 使用toDataURL()方法，可以导出在canvas元素元素上绘制的图像。
 

2. 2D上下文

 
2D上下文的坐标开始于canvas元素的左上角，圆点坐标为（0，0），所有坐标都是基于这个圆点计算，x值越大越靠右，y值越大越靠下。

2.1 填充和描边

 
2D上下文的两种基本绘图操作是填充和描边（fillStyle和strokeStyle）

 

2.2 绘制矩形

 

矩形是唯一一种可以直接在2D上下文中绘制的形状。

方法名	参数	解释	备注
fillRect()	矩形的x坐标、矩形的y坐标、矩形的宽度和矩形的高度	在画布上绘制的矩形会填充指定的颜色
strokeRect()	同上	在画布上绘制的矩形会使用指定的颜色描边
clearRect()	同上	清除画布上的矩形区域

 

2.3 绘制路径

 
要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。

方法名	参数	解释	备注
arc(x,y,radius,startAngle,endAngle,couterclockwise)	以(x,y)为圆心绘制一条弧线，半径为radius,起始和结束角度(用弧度表示)，最后一个参数的值为false表示按顺时针方向计算
arcTo(x1,y1,x2,y2,radius)	从上一点开始绘制一条曲线，到(x2,y2)为止，并且以给定的半径radius穿过(x1,y1)
bezierCurveTo(c1x,c1y,c2x,c2y,x,y)	从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点
lineTo(x,y)	从上一点开始绘制一条直线，到(x,y)
moveTo(x,y)	将绘制游标移动到(x,y),不划线
rect(x,y,width,height)	从点(x,y)开始绘制一个矩形，宽度和高度分别由width和heigh指定

 
最后可以调用strock()方法对路径描边。
 

2.4 绘制文本

 
fillText(),strokeText(),前者由于可以模仿在网页中正常显示文本，所有应用的更多。（接受四个参数：要绘制的文本，x坐标，y坐标和可选的最大像素）

可以设置context.font,context.textalign和context.textBaseline。
 

2.5 变换

 

方法名	参数	解释	备注
rotate(angle)		绕原点旋转图像angle弧度
scale(scaleX,scaleY)	参数的默认值都是1.0	缩放图像，在x，y方向分别乘以scaleX，scaleY
translate(x,y)		将原点坐标移动到（x，y）

 

2.6 绘制图像

 
如果你想把一幅图像绘制到画布上，可以使用drawImage()
 

2.7 阴影

 

方法名	解释	备注
shadowColor	用css颜色格式表示阴影的颜色，默认颜色是黑色
shadowOffsetX	形状或路径x轴方向的阴影偏移量，默认为0
shadowOffsetY	形状或路径y轴方向的阴影偏移量，默认为0
shadowBlur	模糊的像素数，默认为0，即不模糊

 

            var myDiv = document.getElementById('myDiv');
            if(myDiv.getContext){
                var context = myDiv.getContext('2d');

                context.shadowColor = 'rgba(0,0,0,0.5)';
                context.shadowOffsetX = 5;
                context.shadowOffsetY = 5;
                context.shadowBlur = 4;

                context.fillStyle = '#ff0000';
                context.fillRect(10, 10, 50, 50);

                context.fillStyle = 'rgba(0, 0, 255, 1)';
                context.fillRect(30, 30, 50, 50);
            }
            <canvas id="myDiv" width="200" height="200"></canvas>

 

2.8 渐变

 
首先要创建一个新的线性渐变，可以调用createLinearGradient(),这个方法接收四个参数：起点的x坐标，起点的y坐标，终点的x坐标，终点的y坐标。然后使用addColorStop(),这个方法接收两个参数：色标位置和css颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字。

                var gradient = context.createLinearGradient(30, 30, 70, 70);
                gradient.addColorStop(0,"#ffffff");
                gradient.addColorStop(1,"#000000");

                context.fillStyle = gradient;
                context.fillRect(30, 30, 50, 50);

 

2.9 模式

 

模式其实就是重复的图像，可以用来填充或描边图形。createPattern()
 

2.10 合成

 
globalAlpha是一个介于0和1之间的值（包括0和1），用于指定所有绘制的透明度，默认值为0，如果后续操作都要基于相同的透明度，就可以先把globalAlpha设置为适当的值，然后绘制，最后再把它设置回默认值0。

            var myDiv = document.getElementById('myDiv');
            if(myDiv.getContext){
                var context = myDiv.getContext('2d');

                context.fillStyle = "#ff0000";
                context.fillRect(10, 10, 50, 50);

                context.globalAlpha = 0.5;

                context.fillStyle = "rgba(0, 0, 255, 1)";
                context.fillRect(30, 30, 50, 50);

                context.globalAlpha = 0;
            }

globalCompositionOperation表示绘制的图形怎样与先绘制的图形结合。这个属性值是一个字符串，可以选择的值有很多，比如source-over,source-in,source-out等。