cnavas

canvas

• ctx.stroke() ：绘制

• ctx.moveTo()：移动到某个位置

• ctx.lineTo()：从ctx.moveTo或是上一个ctx.lineTo画直线

• ctx.beginPath()：绘制另外的轨迹

• ctx.closePath()：闭合轨迹，形成闭合

• ctx.rect(x-positon,y-positon,x-width,y-height)：直接绘制矩形框

• ctx.strokeStyle：绘制出来图形的颜色

• ctx.fill()：把闭合轨迹填充上颜色，默认是黑色

  ctx.fillStyle = 'green' 设置颜色

• ctx.fillRect(x-positon,y-positon,x-width,y-height))

• ctx.arc(x-position,y-positon,r-length,star-deg,end-deg,bloean)：弧线

  let deg = Math.PI / 180
  

  ​

• ctx.fillText('content',x-positon,y-position,x-width)：绘制文字

• ctx.strokeText()：文字大小

• ctx.font：与css的写法一致

  ctx.font = "89px weiruf"
  

  ​

• ctx.textAlign：指定水平方向 center left start

• ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

H5出现的技术，有些低版本的浏览器不会显示出来

<hqyj>对于浏览器不认识的标签，浏览器会把它当作文本标签来显示</hqyj>

canvas元素自己属于图片，相当一个画板，有自己的编码，width和height是属性；css也有高宽，是渲染出来的

<canvas id="" width="" height=""></canvas>

var canvas = document.querSelector('#box')
var pen = canvas.getContext("2d")
pen.moveTo(100,200)
pen.lineTo(400,400)
pen.stroke()

清除画板

1. 重新更改canvas的宽高

   利用浏览器的重绘

   canvas.width = 600
   

2. ctx.clearRect((x-positon,y-positon,x-width,y-height)

canvas应用

• 双屏互动
• 大数据页面==>百度出的框架 echarts
• 游戏（别人写的函数库）
• 广告
• 特效

eg

// 获取canvas元素
var canvas
var ctx = canvas.getContext("2d") // 获取上下文context内容
ctx.moveTo(100,100)
ctx.lineTo(300,300)  // 把上一次的终点作为这一次的七点，意思是不一定要moveTo,直接lineTo就可
ctx.moveTO(400,100)
ctx.lineTO(100,100)
ctx.moveTO(400,100)
ctx.lineTO(300,300) 
ctx.stroke()  //绘制

上下文：别人框架底层api我们用对象来调用，这种对象叫上下文