js-canvas（基本⽤法）
###1. canvas（画布）
  <canvas>是HTML 5 新增的元素，可⽤于通过使⽤JavaScript中的脚本来绘制图形
    默认宽⾼为300px*150px
###2.渲染上下⽂
  <canvas>元素只是创造了⼀个固定⼤⼩的画布，要想在它上⾯绘制内容，我们需要到它的渲染上下⽂    <canvas>元素有⼀个getContex（）⽅法，这个⽅法是⽤来获取渲染上下⽂和它的绘画功能
  基本⽤法：
      <canvas id="cav" width="300px" height="150px"></canvas>
      var canvas = document.querySelector("#cav")
      Context){    //  必须判断是否存在该⽅法，即判断浏览器是否⽀持canvas
        var ctx = Context("2d");
      }
###3. .画布api
oc.width
oc.height
###4.上下⽂api
ctx.fillRect(x,y,w,h)：填充矩形
ctx.strokeRect(x,ymwmh)：带边框的矩形
ctx.clearRect(0,0,oc.width,oc.height)：清除整个画布
注意原点的位置
ctx.fillStyle
ctx.strokeStyle
ctx.lineWidth
ctx.lineCap
ctx.lineJoin
ctx.lineTo(x,y)：将画笔移到x，y处
<(x,y,w,h)
ctx.arc(x,y,r,degS,degE,dir)
ctx.arcTo(x1,y1,x2,y2,r):2个坐标，⼀个半径
结合moveTo(x,y)⽅法使⽤，
x,y：起始点
x1,y1：控制点
x2,y2：结束点
ctx.quadraticCurveTo(x1,y1,x2,y2)        创建⼆次贝塞尔曲线
结合moveTo(x,y)⽅法使⽤，
x,y：起始点
x1,y1：控制点
x2,y2：结束点
必须经过起点和终点
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)        创建三次⽅贝塞尔曲线
结合moveTo(x,y)⽅法使⽤，
x,y：起始点
x1,y1：控制点
x2,y2：控制点
x3，y3：结束点
必须经过起点和终点
ctx.fill()
ctx.stroke()
ctx.beginpath()：清除路径容器
ctx.closepath()：闭合路径
fill⾃动闭合
stroke需要⼿动闭合
ctx.save()
将画布当前状态(样式相关变换相关)压⼊到样式栈中
将样式栈中栈顶的元素弹到样式容器中
图像最终渲染依赖于样式容器
ctx.scale(因⼦):
放⼤：放⼤画布，画布中的⼀个css像素所占据的物理⾯积变⼤，画布中包含的css像素的个数变少画布中图像所包含的css像素的个数不变
js获取子元素缩⼩：缩⼩画布，画布中的⼀个css像素所占据的物理⾯积变⼩，画布中包含的css像素的个数变多画布中图像所包含的css像素的个数不变

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。