canvas的基本使用

canvas标签的使用

• 默认宽：300，高：150
• 标签

  <canvas>
      --不支持的浏览器可以看见的内容
  </canvas>

绘制环境

• getContext(‘2d), 目前支持2d的场景

绘制方块

• fillRect(L,T,W,H): 默认颜色是黑色
• strokeRect(L,T,W,H): 带边框的方块
  • 默认一个像素黑色边框，显示出来的不一样的原因：类似ps都是一个一个的像素方块，当坐标点刚好占据一个像素的一般，系统就会默认填充，两边都会补上半个像素，就形成了2个像素的边框

设置绘图

• fillStyle：填充颜色（绘制canvas是有顺序的）
• lineWidth：线宽度，是一个数值
• strokeStyle: 边线颜色

边界绘制

• lineJoin:边界连接点样式
  • miter（默认）、round（圆角）、bevel（斜角）
• lineCap：端点样式
  • butt（默认）、round（圆角）、square（高度多出为宽度一般的值）

绘制路径_1

• beginPath：开始绘制路径
• closePath：结束绘制路径
• moveTo：移动到绘制的新目标点
• lineTo ：新的目标点

##绘制路径_2

• stroke：画线，默认黑色
• fill：填充，默认黑色
• rect：矩形区域
• clearRect：删除一个画布的矩形区域
• save：保存路径
• restore：恢复路径
• 小问题：把canvas的宽高样式不写在行间，就像是被缩放

绘制圆

• arc(x,y,半径,起始弧度,结束弧度,旋转方向)
  • x,y：起始位置
  • 弧度与角度的关系：弧度=角度*Math.PI/18
  • 旋转方向：顺时针（默认：false）、逆时针（true)

绘制其他曲线

• acrTo(x1,y1,x2,y2,r)
  • 第一组坐标、第二组坐标、半径
• auadraticCurveTo(dx,dy,x1,y1)
  • 贝塞尔曲线：第一组控制点、第二组结束坐标
• bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
  • 贝塞尔曲线：第一组控制点、第二组控制点、第三组结束坐标

变换

• translate
  • 偏移：从起始点为基准点，移动到当前坐标位置
• rotate
  • 旋转：参数为弧度
• scale
  • 缩放

插入图片

• 等图片加载完，再执行canvas操作
  • 图片预加载：在onload中调用方法
• drawlmage(olmg,x,y,w,h)
  • olmg:当前图片 x,y:坐标 w,h:宽高

设置背景

• createPattern(olmg,平铺方式)
  • 2参为:repeat、repeat-x、repeat-y、no-repeat

渐变

• createLinearGradilent(x1,y1,x2,y2)
  • 线性渐变
  • 第一组参数：起始点坐标、第二组参数：结束点坐标
  • addColorStop(位置,颜色) 添加渐变点
• createRadialGradient(x1,y1,r1,x2,y2,r2)
  • 放射性渐变
  • 参数：第一个圆的坐标和半径，第二个圆的坐标和半径

文本

• strikeText(文字,x,y)
  • 文字边框
• fillText(文字,x,y)
  • 文字填充
    *font
  • 文海做大小：’60px impact’
• textAlign
  • 默认是start跟left一样的效果 end right center
• TextBaseline
  • 文字上下的位置的方式默认：alphabetic
• measureText()
  • measureText(str) width:只有宽度，没有高度

阴影

• shadowOffsetX、shadowOffsetY
  • x轴偏移，y轴偏移
• shadowBlur
  • 高斯模糊值
• shadowColor
  • 阴影颜色

像素

• getImageData(x,y,w,h)
  • 获取图像数据
• putImageData(获取图像,x,y)
  • 设置新的图像数据
• 属性
  • Width:一行的像素个数
  • Height:一列的像素个数
  • data:一个数组，包含每个像素的rgba四个值，注意每个值都在0~255之间的整数
• createImageData(w,h)
  • 生成新的像素矩阵，初始值是全透明的黑色即（0,0,0）
  • 像素显字
• 获取和设置指定坐标
  • 封装：getXY，setXY、
• 图片的像素操作
  • 必须是同源下

合成

• 全局阿尔法值
  • globalAlpha
• 覆盖合成
  • 源：新的图形
  • 目标：已经绘制过得图形
  • globalCompositeOperation属性

将画布到出为图像

• toDataURL
  • 火狐右键可以直接导出图片

事件操作

• isPointInPath
  • 是否在点击范围内
  • CanvaScript(canvas中的jQuery)

赏

谢谢你请我吃糖果