JS总结（四）

Canvas

Canvas 是 HTML5 提供的一种新标签，它是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。

标签语法和属性

• 可以设置 width 和 height 属性，但是属性值单位必须是 px，否则忽略。
  默认 300*150 像素
• 不要用 CSS 控制它的宽和高，图片会拉伸，重新设置 canvas 标签的宽高属性会让画布擦除所有的内容。

获取上下文

•   var canvas = document.getElementById('cavsElem'); 
    var ctx = canvas.getContext('2d'); 
  

基本的绘制路径

canvas 坐标系，从最左上角(0,0)开始。x 向右增大， y 向下增大

• beginPath()：开始路径
• moveTo(x, y)：设置绘制起点
• lineTo(x, y)： 绘制直线
• closePath()：闭合路径
• stroke()：描边
• fill()：填充

• 绘制矩形

  width, height：指的是绘制的矩形的宽和高
  • fillRect(x, y, width, height)：绘制一个填充的矩形
  • strokeRect(x, y, width, height)：绘制一个矩形的边框
  • clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明

• 绘制圆

  • arc(x, y, r, startAngle, endAngle, anticlockwise)：（x,y）为圆心，r为半径，从 startAngle 弧度开始到endAngle弧度结束，ewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)
  • arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

• 绘制文本

  • font ：定义字体，可定义大小，字体类型
  • fillText(text,x,y)：绘制实心的文本
  • ==strokeText(text,x,y) ==：绘制空心的文本
  • textAlign 文本对齐选项
  • ==textBaseline == 基线对齐选项
  • direction 文本方向

• 绘制图片

•   	var img = new Image();   // 创建一个<img>元素
    	img.src = 'myImage.png'; // 设置图片源地址  创建图片
  

  • drawImage(img,x,y)：img是绘制图片的dom对象，x,y为图片左上角位置
  • drawImage(img,x,y,width,height)：可规定宽高
  • context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：图片裁剪

添加样式颜色

• fillStyle 设置或返回图形的填充颜色
• strokeStyle设置或返回图形轮廓的颜色

状态的保存和恢复

• save()：保存当前环境的状态，可以把当前绘制环境保存到缓存中。
• restore()：返回之前保存过的路径状态和属性，获取最近缓存的 ctx

变换

• 缩放

  scale(scalewidth,scaleheight)：scalewidth : 缩放当前绘图的宽度，scaleheight : 缩放当前绘图的高度
  注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。

• 旋转

rotate(angle)：旋转当前的绘图，参数为旋转的角度（弧度），是顺时针方向的，旋转的中心是坐标原点

画布渲染画布

drawImage(img,x,y)：img 参数也可以是画布，把一个画布整体的渲染到另外一个画布上