canvas基础

发表于 | 更新于

- 简介

  • 在js中进行图片的绘制
  • 往往用于全屏类的动画和小游戏的制作和图标的绘制

- 基本语法

  • <canvas width='400' height='500' id='canvas'></canvas>
  • var canvas = document.getElementById(‘canvas’);
  • var ctx = canvas.getContext(‘2d’);

- canvas常用方法

  • ctx.beginPath()：设置起始路径
  • ctx.closePath()：自动闭合开始点和终点
  • ctx.fillStyle = color：设置填充样式
  • ctx.strokeStyle = color：设置描边样式
  • ctx.fill()：声明填充
  • ctx.stroke()：声明描边

  • ctx.lineWidth = number：描边宽度

  • ctx.rect(x,yx,w,h)：绘制矩形

  • x，y：起始点坐标
  • w：设定的宽度

  • h：设定的高度

  • ctx.clearRect(x,y,w,h)：清除矩形

  • ctx.arc(x,y,r,start_point,end_point,countWise)：绘制圆形

  • x,y：圆心坐标
  • r：圆心的半径
  • start_point：起始点（0-2*math.PI）
  • end_point：终止点（0-2*math.PI）
  • countWise：绘制方向|true、flase

- 绘制线段

  • moveTo(x,y)：设定要开始线段的坐标

  • lineTo(x,y)：目标线段坐标

  • arcTo(x1,y1,x2,y2,r)：绘制弧度

  • x1,y1：控制点坐标
  • x2,y2：结束点坐标

  • r：绘制弧度的半径

  • ctx.quadraticCurveTo(x1,y1,x2,y2)：绘制二次贝塞尔曲线

  • x1,y1：控制点坐标
  • x2,y2：结束点坐标
  • ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3)：绘制三次贝塞尔曲线
  • x1,y1：控制点坐标
  • x2,y2：结束点坐标
  • x3,y3：结束点坐标
    -
  • 关于css3中的贝塞尔曲线
  • 贝塞尔曲线是指过渡效果
  • ctx.createLinearGradient(x1,y1,x2,y2)：设置线性渐变
  • x1,y1：起点坐标
  • x1,y1：起点坐标
  • lg.addColorStop(p,color)：0-1设置颜色
  • 可以设置填充，描边：
  • var lg = ctx.cteateLinearGradient(x1,y1,x2,y2)

  • fillStyle = lg

  • ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)：设置径向渐变

  • x1,y1,r1：內圆圆心的坐标和半径

  • x2,y2,r2：外圆圆心的坐标和半径

  • 图形转换

  • ctx.translate(x,y)：平移
  • x,y：平移的坐标
  • ctx.rotate(darg)：旋转
  • darg：弧长 arg*Math.PI/180
  • ctx.scale(w,h)：放大

  • w：宽度方向上倍数 h：高度方向上倍数

  • 绘制阴影

  • shadowOffsetX：水平平移距离
  • shadowOffsetY：垂直平移距离
  • shadowBlur：模糊大小
  • shadowColor：阴影颜色
  • v-shadow=distance*sin(180-角度）
  • h-shadow=distance*cos(180-角度）
  • spread=size-size*拓展

  • blur=size-spread

  • 绘制文本属性

  • ctx.font = ‘style size family’：设置文本样式
  • ctx.textBaseline = ‘top|midde|bottom’：设置文本基线
  • ctx.textAlign = ‘left|center|right’：设置水平对齐方式
  • ctx.fillText = ‘text,x,y’：设置实心字体
  • text：文字信息
  • x,y：文字位置
  • ctx.strokeText = ‘text,x,y’：设置空心字体
  • text：文字信息

  • x,y：文字位置

  • 绘制图片

  • drawImage(img,sx,sy,sw,sh,x,y,w,h)
  • sx,sy：裁剪坐标
  • sw,sh：裁剪高度
  • x,y：canvas中的坐标
  • w,h：对象高度
  • var img = new Image();img.src = ‘img/html.png’;img.onload = function(){ ctx.drawImage(img,0,0,399,302,0,0,800,800);}

图像组合

  • globalCompositeOperation：设置图像组合
  • sourse-over：新图像在原图像之上
  • destination-over：原图上在新图像之上
  • source-in：取交集部分显示新图像
  • destination-in：取交集部分显示原图像
  • sourse-atop：显示原图和交集部分 交集部分显示新图像
  • destination-atop：显示新图像和交集部分 交集部分显示原图像
  • sourse-out：显示新图像非交集部分
  • destination-out：显示原图像非交集部分
  • lighter：都显示，重叠部分颜色叠加
  • xor：费交集部分显示

  • copy：只显示新图像

  • 存入和读取

  • ctx.save()：存入
  • ctx.restore()：读取