• js-canvas(基本用法)


    ###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/

  • 相关阅读:
    make 实例 一 3463
    python3 中对arrow库的总结(转发)
    impala 导出CSV 或excel
    设置虚拟机IP
    centos7 tomcat9
    eclipse 创建普通maven项目
    java log4j日志配置
    java运行jar命令提示没有主清单属性
    Java 读取 .properties 配置文件
    python 机器学习多项式回归
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10556500.html
Copyright © 2020-2023  润新知