js-canvas(基本用法)

时间:2023-01-31 08:51:39

###1. canvas(画布)

  <canvas>是HTML 5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形

    默认宽高为300px*150px

  基本概念和方法入门推荐: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

###2.渲染上下文

  <canvas>元素只是创造了一个固定大小的画布,要想在它上面绘制内容,我们需要找到它的渲染上下文

    <canvas>元素有一个getContex()方法,这个方法是用来获取渲染上下文和它的绘画功能

    

  基本用法:

      <canvas id="cav" width="300px" height="150px"></canvas>

      var canvas = document.querySelector("#cav")

      if(canvas.getContext){    //  必须判断是否存在该方法,即判断浏览器是否支持canvas

        var ctx = canvas.getContext("2d");

      }

 

 ###3. .画布api
        oc.getContext("2d");
        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.moveTo(x,y):将画笔抬起点到x,y处
        ctx.lineTo(x,y):将画笔移到x,y处
        ctx.rect(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.restore()
            将样式栈中栈顶的元素弹到样式容器中
            图像最终渲染依赖于样式容器
            
        ctx.translate(x,y):将原点按当前坐标轴位移x,y个单位
        ctx.rotate(弧度):将坐标轴按顺时针方向进行旋转
        ctx.scale(因子):
            放大:放大画布,画布中的一个css像素所占据的物理面积变大,画布中包含的css像素的个数变少
                    画布中图像所包含的css像素的个数不变
            缩小:缩小画布,画布中的一个css像素所占据的物理面积变小,画布中包含的css像素的个数变多
                    画布中图像所包含的css像素的个数不变

附加: canvas作品资源  https://www.html5tricks.com/tag/html5-canvas/