复习一下canvas(一)

讲真一般企业其实用到canvas的场合应该不是很多，基本的api也不难。今天复习一下：
绘制矩形的api：

fillstyle="";
fillRect(x, y, width, height) 填充
strokeRect(x, y, width, height) 边框
clearRect(x, y, width, height) 清除

绘制路径的api：

beginPath()
ctx.moveTo(75,50);
ctx.lineTo(100,75); --记录直线结束的坐标，不会描边（线是看不见的）；
closePath()
stroke() --描边的时候不会自动闭合路径，需要closepath()；
fill()(x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。">--填充的时候会自动闭合路径，不需要closepath()；

绘制圆弧：
arc(x, y, radius, startAngle, endAngle, anticlockwise)--坐标，半径，开始结束角度（弧），true逆时针false顺时针

*贝塞尔曲线

*path2d对象

样式和颜色：

fillstyle=color；
strokestyle=color；
--color也可以是“rgba（r,g,b,alpha）”设置透明度

透明度（Transparency）：
globalAlpha = transparencyValue；（0.0-1.0）--影响到canvas里所有图形的透明度

线形（line style）：
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

渐变：
1.创建canvasGradient对象。
createLinearGradient(x1, y1, x2, y2)
createRadialGradient(x1, y1, r1, x2, y2,r2)
2.添加色标。
gradient.addColorStop(position,color),position:0-1.
3.strokeStyle和 fillStyle 属性都可以接受 canvasGradient对象。

图案样式( Patterns):
createPattern(image, type);
--image 可以是一个img的引用或另一个canvas。
是 Canvas 2D API 使用指定的图像 (CanvasImageSource)创建模式的方法。 它通过repetition参数在指定的方向上重复元图像。此方法返回一个CanvasPattern对象。">--type枚举字符串：repeat，repeat-x，repeat-y和 no-repeat。
创建出一个pattern 后可以赋值给fillStyle或strokeStyle


*阴影 （Shadows）
*Canvas 填充规则

绘制文本：
fillText(text, x, y [, maxWidth])
strokeText(text, x, y [, maxWidth])
 ctx.font = "48px serif";
 ctx.fillText("Hello world", 10, 50);
下面是摘自火狐教程的文本样式属性：
----------------------------------------------

CSS font 规范相同的字符串值。 默认字体是 10px sans-serif." HREF="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/font">font = value

当前我们用来绘制文本的样式. 这个字符串使用和 CSSfont-style, font-variant, font-weight, font-size, line-height 和 font-family属性的简写，或使用特定的关键字设置元素的字体为某个系统字体。" HREF="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font">font属性相同的语法. 默认的字体是 10px sans-serif。

textAlign = value

文本对齐选项. 可选的值包括：start, end,left, right or center.默认值是 start。

textBaseline = value

基线对齐选项. 可选的值包括：top, hanging,middle, alphabetic,ideographic,bottom。默认值是 alphabetic。

direction = value

文本方向。可能的值包括：ltr, rtl,inherit。默认值是 inherit。

-----------------------------------------------------

使用图像：
一.canvas中引用图像步骤：
1.引用一个指向HTMLImageElement的对象或另一个canvas，或者提供url
2.使用drawImage()函数将图片绘制到画布上。

 CanvasImageSource类型引用
-HTMLImageElement，
-HTMLVideoElement，
-HTMLCanvasElement，
-ImageBitmap；
情况：
1.获取当前页面图片。
2.向服务器加载图片(即时创建)：new Image()；onload=fn(); src=url;
3. data: url 方式嵌入图像；
*4.使用视频帧。

二.绘制图片：
drawImage 方法有三种形态:
1.drawImage(image, x, y) --image对象及起始点坐标
2.drawImage(image, x, y, width, height) 设置高宽，即缩放
3.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth,dHeight)  --切片 souceImage的起始坐标及高宽 todestination的起始点及高宽