Professional JS(15.2.4-Drawing Text/Transformation/Drawing Imgae/Shadow/Gradient/Pattern)

1.Drawing Text
@+①Since it's often necessary to mix text and graphics,the 2D drawing context provides methods to draw text.There are two methods for drawing text,fillText() and strokeText(),and each takes four arguments:the string to draw,the x-coordinate,the y-coordinate,and an optional maximum pixel width to draw.Both methods base their drawing on the following three properties:
a)font—Indicates the font style[bold],size[14px] and family[helvetica] in the same manner specified in CSS.
@b)textAlign(水平对齐，以点为起点)—Indicates how the text should be aligned(对齐).Possible values are 'start','end','left','right',and 'center',lt's recommended to use 'start' and 'end' instead of 'left' and 'right' as there are more indicative of rendering in both left-to-right languages and right-to-left languages.

c)textBaseline—Indicates the baseline of the text.Possible values are 'top','hanging','middle','alphabetic','ideographic',and 'bottom'.
These properties have a default value,so there's no need to set them each time you want to draw text.The fillText() method uses the fillStyle property to draw the text,whereas the strokeText() method uses the strokeStyle property.

var drawing=document.getElementById('drawing');if(drawing.getContext){    var context=drawing.getContext('2d');    //开始路径    context.beginPath();    //绘制外圆:100,100为圆心（x,y）|半径radius：99|startAngle|endAngle|counterclockwise逆时针---false表示顺时针    context.arc(100,100,99,0,2*Math.PI,false);    //绘制内圆    context.moveTo(194,100);//将绘图游标移动到（x,y）,不划线， 194&94    context.arc(100,100,94,0,2*Math.PI,false);    //绘制分针    context.moveTo(100,100);//定位到圆心，不过没有实际点    context.lineTo(100,26);//从上一点开始，也就是moveTo的那个点开始绘制一条直线，至点(x,y)。    //绘制时针    context.moveTo(100,100);    context.lineTo(35,100);    //3    context.font='bold 14px Arial';    context.textAlign='center';    context.textBaseline='middle';    context.fillText('3',180,100);    //6    context.font='bold 14px Arial';    context.textAlign='center';    context.textBaseline='middle';    context.fillText('6',100,180);    //9    context.font='bold 14px Arial';    context.textAlign='center';    context.textBaseline='middle';    context.fillText('9',20,100);    //12    context.font='bold 14px Arial';    context.textAlign='center';    context.textBaseline='middle';    context.fillText('12',100,20);    //描边路径    context.stroke();}

2.Transformations
@++①有如下方法来修改变换矩阵：
a)rotate(angle)：将图像围绕原点旋转angle弧度。
b)translate(x,y)：将坐标原点移动到(x,y)。
c)scale(scaleX,scaleY)：缩放图像，在X,Y方向上分别乘以scaleX,scaleY。这个值默认都为1.0
d)transform(m1_1,m1_2,m2_1,m2_2,dx,dy)：直接修改变换矩阵，乘以：m1_1,m1_2,dx/m2_1,m2_2,dy/0,0,1【三行三列】
e)setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy)：将变化矩阵重置为默认状态，在调用transform()。

var drawing=document.getElementById('drawing');if(drawing.getContext){    var context=drawing.getContext('2d');    //开始路径    context.beginPath();    //绘制外圆    context.arc(100,100,99,0,2*Math.PI,false);    //绘制内圆    context.moveTo(194,100);    context.arc(100,100,94,0,2*Math.PI,false);    //变换原点    context.translate(100,100);    //绘制分针    context.moveTo(0,0);    context.lineTo(0,-85);    //绘制时针    context.moveTo(0,0);    context.lineTo(-65,0);    //描边路径    context.stroke();}

@+②All of these transformations,as well as properties like fillStyle and strokeStyle,remain set on the context until explicitly changed.Although there's no way to explicitly reset everything to their default values,there are two methods that can help keep track of changes.Whenever you want to be able to return to a specific set of properties and transformations,call the save() method.Once called,this method pushes all of the settings at the moment onto a stack for safekeeping.You can then go on to make other changes to the context.When you want to go back to previous settings,call the restore() method,which pops the settings stack and restores all of the settings.You can keep calling save() to store more settings on the stack and then systematically go back through them using restore().

var drawing=document.getElementById('drawing');if(drawing.getContext){    var context=drawing.getContext('2d');    context.beginPath();    //save()&restore()---栈结构---后进先出    //A    context.fillStyle='#f00';//red    context.save();    //B    context.fillStyle='#0f0';//green    context.translate(100,100);//定位初始点为(100,100)    context.save();    //B，用自己的蓝色    context.fillStyle='#00f';//blue    context.fillRect(0,0,100,200);//起始点(100,100)--blue    //B    context.restore();    context.fillRect(10,10,100,200);//起始点(110,110)---green    //A    context.restore();    context.fillRect(0,0,100,200);//起始点(0,0)---red    context.fill();}

3.Drawing Images
@+①除了给drawImage()方法传入HTML<img>元素外，还可以传入另一个<canvas>元素作为其第一个参数。

var drawing=document.getElementById('drawing');//确定浏览器支持<canvas>元素if(drawing.getContext){    //2D上下文    var context=drawing.getContext('2d');    //获取文档中第一张图像的引用，保存在变量image中    var image=document.images[0];    //将获取的第一张图像绘制到上下文中，起点为（10,10）    context.drawImage(image,10,10);    //将获取的第一张图像绘制到上下文中，起点为（50,10）,宽度和高度分别为20px,30px    context.drawImage(image,50,10,20,30);    //前四个整数表示截取源图像的坐标+尺寸/后四个整数表示目标图像的坐标+尺寸    context.drawImage(image,0,10,50,50,0,100,40,60);}

4.Shadows
@+①

var drawing=document.getElementById('drawing');//确定浏览器支持<canvas>元素if(drawing.getContext){    //2D上下文    var context=drawing.getContext('2d');    //不同浏览器下可能效果不同：P458    context.shadowColor='rgba(0,0,0,0.5)';//阴影颜色，默认为黑。    context.shadowOffsetX=5;//形状或路径x轴方向的阴影偏移量，默认为0。    context.shadowOffsetY=5;    context.shadowBlur=4;//模糊的像素数，默认为0。    context.fillStyle='#f00';    context.fillRect(10,10,50,50);    context.fillStyle='rgba(0,0,255,0.8)';    context.fillRect(30,30,50,50);}

5.Gradients
+①createLinearGradient()

var drawing=document.getElementById('drawing');if(drawing.getContext){    var context=drawing.getContext('2d');    //仅仅是设置渐变的具体样式    //gradient对象表示的是一个从画布上点(30,30)到点(70,70)的渐变。    var gradient=context.createLinearGradient(30,30,70,70);//起始(x,y)&终点(x,y)    gradient.addColorStop(0,'#f00');//色标位置，颜色    gradient.addColorStop(1,'#00f');//0(开始的颜色)&1(结束的颜色)    context.fillStyle='#f00';    context.fillRect(10,10,50,50);    context.fillStyle=gradient;    context.fillRect(30,30,50,50);}//为了匹配坐标与渐变区域---创建一个函数function createRectLinearGradient(content,x,y,width,height){    return createLinearGradient(x,y,x+width,y+height);}

@+②createRadialGradient()–径向渐变（放射渐变）

var drawing=document.getElementById('drawing');if(drawing.getContext){    var context=drawing.getContext('2d');    //两个圆的圆心和半径    var gradient=context.createRadialGradient(55,55,10,55,55,30);    gradient.addColorStop(0,'#0f0');    gradient.addColorStop(1,'#00f');    context.fillStyle='#f00';    context.fillRect(10,10,50,50);    context.fillStyle=gradient;    context.fillRect(30,30,50,50);}

6.Pattern
@+①createPattern()

var drawing=document.getElementById('drawing');if(drawing.getContext){    var context=drawing.getContext('2d');    var image=document.images[0];    //repeat/repeat-x/repeat-y/no-repeat    //该方法的第一个参数还可以是<video>元素、<canvas>元素。    var pattern=context.createPattern(image,'repeat');    context.fillStyle=pattern;    //创建的矩形：起点（10,10），宽和高分别为150px    context.fillRect(10,10,150,150);}