复习一下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() --填充的时候会自动闭合路径，不需要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。
--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);
下面是摘自火狐教程的文本样式属性：
----------------------------------------------

font = value

当前我们用来绘制文本的样式. 这个字符串使用和  CSS 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()；οnlοad=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的起始坐标及高宽 to destination的起始点及高宽